(一)第一种解决方案(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中新增属性,浏览器支持情况一般