如何水平居中一个元素

最新推荐文章于 2024-07-24 06:54:05 发布

weixin_33985507

最新推荐文章于 2024-07-24 06:54:05 发布

阅读量67

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/8080zh/p/9274781.html

1. text-align-:ceter 可以为文本水平居中

2.magin:0 auto; 块级元素设置宽度后，设置magin:auto:0;可使区域块居中；

3.position:absolute + margin-left:-容器一半宽度。

width:800px; //一定要设置宽度

Position:absolute;

Left:50%;

Margin-left: - 400px //此为负值

4. position: absolute;

margin: 0 auto;

left: 0;

right:0;

width:400px; //一定要设置宽度

5.transform 例如：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>居中</title>
    <style type="text/css">
        .container {
            height: 200px;
            background-color: #ccc;
            position: relative;
        }
        .center-p {
            background-color: yellow;
            position: absolute;
            top: 50%;
            left: 50%;
            transform:translate(-50%,-50%);
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="center-p">
            table-cell居中
        </div>
    </div>
</body>
</html>

作者：凌Linny
链接：https://www.jianshu.com/p/d00d32f9cb7a
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

转载于:https://www.cnblogs.com/8080zh/p/9274781.html