css布局 (一)水平居中布局

最新推荐文章于 2021-09-06 18:09:37 发布

陈迹·清欢

最新推荐文章于 2021-09-06 18:09:37 发布

阅读量549

点赞数

分类专栏： # css 文章标签： css 定位 css3 html

本文链接：https://blog.csdn.net/qq_36360463/article/details/104494804

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

(一)第一种解决方案(text-align: center+display: inline-block)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一种水平居中布局方案</title>
    <style>
        #parent{
            width: 100%;
            height: 200px;
            background: #ccc;
            text-align: center;
            /*
            text-align本用于text的对齐
            有属性值left、right、center
            分别是左对齐，右对齐，居中
             */
        }

        #child{
            width: 200px;
            height: 200px;
            background: aquamarine;
            /*
            不可设置为inline，inline的元素不具有width、height属性
            inline元素的宽高只会由内部元素撑开
             */
            display: inline-block;
        }
    </style>
</head>
<body>
<div id="parent">
    <div id="child">
        454545
    </div>
</div>
</body>
</html>

效果图：
在这里插入图片描述

优点：
浏览器兼容较好，因为现在所使用的属性在很久以前就已经存在了。
缺点：
子元素会继承父元素的text-align属性，就像我们在绿色框中看到的数字一样，水平居中了。当然，要是不想要子元素继承，子元素单独更改就行。

(二)第二种解决方案(display:block+margin:0 auto)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二种水平居中布局方案</title>
    <style>
        #parent{
            width: 100%;
            height: 200px;
            background: #ccc;
        }
        #child{
            width: 200px;
            height: 200px;
            background: aquamarine;
            display: block;
            /*
            margin:外边距
            四个值：上右下左
            两个值：上下 左右
            一个值：代表全部
             */
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="parent">
    <div id="child">
        454545
    </div>
</div>
</body>
</html>

效果图：
在这里插入图片描述
备注：我尝试过把child的diplay设为inline-block，但此时auto无效(margin是有效的)。
{原意用于水平居中对齐，所以必须要得到自身的宽度才能定下自身在父级中居中的位置（此宽度必须为确切数值，默认为0），由于inline-block元素是块级元素，所以自己本身的宽度取决于内容本身的宽度，但是这个宽度并不是确切数值，所以代码在搜寻的时候不知道该给多少宽度，就选取了默认的0，导致居中失效。注：这段话截取于网络并为本人未相通，所以先放着}

优点：
只需对子级元素设置就可以实现水平方向居中布局效果。
缺点：
如果子级元素脱离文档流，导致margin属性的值无效(如子元素设置float或者设置绝对或固定定位)

第三种解决方案(position:absolute+left:50%+transform: translateX(-50%))

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第三种解决方案</title>
    <style>
        #parent{
            width: 100%;
            height: 200px;
            background: #ccc;

            /*
            static表示不开启定位，
            relative表示相对于原本位置定位，但其原本所有空间仍然保留
            */
            position: relative;
        }

        #child{
            width: 200px;
            height: 200px;
            background: aquamarine;

            /*
            当把当前元素设置为绝对定位后，
            如果父级元素没有开启定位的话，当前元素是相对于页面定位的
            如果父级元素开启了，则是相对于父级元素定位
             */
            position: absolute;
            /*
            设置离左边距的距离为50%(结果就是child的左边距居中了)
             */
            left: 50%;

            /*
            因为我们需要子元素整体居中，所以我们对子元素进行平移
             */
            transform: translateX(-50%);
        }
    </style>
</head>
<body>
<div id="parent">
    <div id="child">
        454545
    </div>
</div>
</body>
</html>

效果图：
在这里插入图片描述

优点：
无论父级元素是否脱离文档流，不影响子级元素的居中效果
缺点：
transform属性是css3中新增属性，浏览器支持情况一般

陈迹·清欢

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css布局 (一)水平居中布局

(一)第一种解决方案(text-align: center+display: inline-block)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>第一种水平居中布局方案</title> <style...
复制链接

扫一扫

专栏目录