水平居中布局:掌握CSS布局中的方法
最编程
2024-01-12 13:50:37
...
本文首发于博客 隔壁王老板 中文章 《CSS布局之水平居中布局》
概念:
水平居中布局 指的是当前元素在父级元素容器中,水平方向是居中显示的。
方案一: inline-block + text-align
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平居中布局</title>
<style>
#parent {
width: 100%;
height: 200px;
background-color: #ccc;
text-align: center;
}
#child {
width: 200px;
height: 200px;
background: orangered;
display: inline-block;
}
</style>
</head>
<body>
<div id="parent">
<div id="child"></div>
</div>
</body>
</html>
优缺点
优点:浏览器兼容性好。代码中使用的均是 CSS 2 中的属性,浏览器兼容性良好。
缺点:text-align
具有继承性。子元素中的文本会继承父元素的 text-align
属性。若子元素中的文本不是居中显示时,则需要重新设置 text-align
属性将其覆盖。
方案二:table + margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平居中布局</title>
<style>
#parent {
background-color: #ccc;
}
#child {
width: 200px;
height: 200px;
/* display 的值为 block 和 table */
display: table;
/*
margin 属性:外边距
* 一个值 - 上右下左
* 二个值 - 第一个值表示上下,第二个值表示左右
* auto 浏览器自动计算(等分)
* 三个值 - 第一个值表示上,第二个值表示左右,第三个值表示下
* 四个值 - 上右下左
*/
margin: 0 auto;
background: orangered;
}
</style>
</head>
<body>
<!--定位父级元素-->
<div id="parent">
<!--定位子级元素-->
<div id="child"></div>
</div>
</body>
</html>
优缺点
优点:只需要对子元素设置就可以显示水平居中布局效果。
缺点:如果子元素脱离文档流,导致 margin
属性的值失效。
方案三:absolute + transform
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平居中布局</title>
<style>
#parent {
width: 100%;
height: 200px;
background-color: #ccc;
/* 开启定位 */
position: relative;
}
#child {
width: 200px;
height: 200px;
background: orangered;
/*
当把当前元素设置为绝对定位后:
*如果父级元素没有开启定位,当前元素相对于页面定位,
*如果父级元素开启了定位的话,当前元素相对于父级元素定位
*/
position: absolute;
left: 50%; /* 子级元素相对于父级元素的左边 50% */
transform: translateX(-50%);
}
</style>
</head>
<body>
<!--定位父级元素-->
<div id="parent">
<!--定位子级元素-->
<div id="child"></div>
</div>
</body>
</html>
优缺点
优点:父级元素是否脱离文档流,不影响子级元素居中显示效果。
缺点:transform
属性是 CSS 3 中新增的属性,浏览器支持情况不好。
上一篇: 学习一些常见的CSS居中方案
下一篇: CSS中实现元素水平垂直居中的六种方法
推荐阅读
-
掌握 CSS Flexbox,创建适应各种设备的完美响应式布局!-CSDN博客
-
[css]Flex柔性布局详解[附携程网移动端案例]、35岁程序员的人生感悟--而对于有时间的同学,作者也给出了他结合众多数据结构算法书籍,精选出的千余题的解题思路和方法论,供需要的同学慢慢研究。
-
做网页中需要掌握的八大 CSS 布局技巧
-
导航栏布局中遇到的问题及解决方案 css 选择器优先级
-
2020年的CSS布局新方法:灵活实现多行四列及更多列数的网格设计
-
快速掌握HTML+CSS实战:实现三行布局,中间区域自适应的简易示例
-
在Vue中实现Swiper的多行多列布局方法
-
理解CSS布局中的position属性(子元素相对定位与父元素绝对定位)
-
理解CSS中的position属性(子元素与父元素布局原理) - 定位顺序与z-index的应用
-
CSS中的100vh应用:实现自适应高度布局与浏览器视口单位的使用