CSS居中完全指南_html/css_WEB-ITnose
人们经常抱怨在CSS中居中元素的问题,其实这个问题其实并不复杂,只是因为方法众多,需要根据情况从众多方法中选取一个出来。接下来,我们做一个‘决定树’来帮我们把问题变的简单一点。首先你需要居中:
-
水平
-
需要居中 inline或者 inline-*元素(如文字或者链接)?
-
需要居中 block类的元素?
-
需要居中多个 block元素?
-
-
垂直
-
需要居中 inline或者 inline-*元素(如文字或者链接)?
-
需要居中 block类的元素?
-
-
既水平又垂直
-
固定宽高
-
不固定宽高
-
使用 flexbox
-
水平居中
水平居中 inline或者 inline-*元素
你可以轻松的在一个 block元素中水平居中一个 inline元素,以下代码对 inline, inline-block, inline-table和 inline-flex等有效
.parent { text-align: center;}
水平居中 block类的元素
在 block元素被设定固定宽度的情况下,可以使用设置元素 margin-left和 margin-right的值为 auto的方法实现水平居中。
.child { width: 400px; margin: 0 auto;}
水平居中多个 block类的元素
通过 inline-block实现
.parent { text-align: center;}.child { display: inline-block; text-align: left;}
通过 flexbox实现
.parent { display: flex; justify-content: center;}
垂直居中
垂直居中 inline或者 inline-*元素
单行
inline/text元素可以简单的用设置相同的上下 padding值达到垂直居中的目的。
.center { pading-top: 30px; padding-bottom: 30px;}
如果因为某种原因不能使用 padding的方法,你还可以设置 line-height等于 height来达到目的。
.center { height: 100px; line-height: 100px; white-space: nowrap;}
多行
相同的上下 padding也可以适用于此种情况,如果不能生效,你可以尝试将该元素的父元素的 dispaly设置为 table,同时该元素的 dispaly设置为 table-cell,然后设置 vertical-align。
.parent { display: table; width: 200px; height: 400px;}.child { display: table-cell; vertical-align: middle;}
如果上述方法不能使用,你可以尝试使用 flexbox,一个单独的 flexbox子元素可以轻易的在其父元素中居中。谨记,这种方法需要父元素有固定的高度。
.parent { display: flex; justify-content: center; flex-direction: column; height: 400px;}
如果上述两种方式均不能使用,你可以使用“幽灵元素”技术,这种方法采用伪元素 ::before撑开高度 ,文字垂直居中。
.parent { position: relative;}.parent::before { content: " "; display: inline-block; height: 100%; width: 1%; vertical-align: middle;}.child { display: inline-block; vertical-align: middle;}
垂直居中 block 类的元素
已知元素高度
.parent { position: relative;}.child { position: absolute; top: 50%; height: 100px; margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */}
未知元素高度
.parent { position: relative;}.child { position: absolute; top: 50%; transform: translateY(-50%);}
使用 flexbox
.parent { display: flex; flex-direction: column; justify-content: center;}
既水平又垂直
固定宽高
.parent { position: relative;}.child { width: 300px; height: 100px; padding: 20px; position: absolute; top: 50%; left: 50%; margin: -70px 0 0 -170px;}
不固定宽高
.parent { position: relative;}.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
使用 flexbox
.parent { display: flex; justify-content: center; align-items: center;}
上一篇: Oracle存储过程 学习笔记
下一篇: mysql数据库导入导入代码
推荐阅读
-
简单了解CSS3的all属性_html/css_WEB-ITnose
-
通过html和css做出下拉导航栏的效果_html/css_WEB-ITnose
-
关于JS 回掉函数的使用_html/css_WEB-ITnose
-
解决浏览器显示长数字不能自动换行或长字母不能换行的问题_html/css_WEB-ITnose
-
收集IE6.0与其它浏览器,样式兼容问题_html/css_WEB-ITnose
-
求css命名规范_html/css_WEB-ITnose
-
CSS定位属性position_html/css_WEB-ITnose
-
css修改输入框的placeholder颜色_html/css_WEB-ITnose
-
JS 实现需要时加载js和css文件_html/css_WEB-ITnose
-
为什么加了word-break : break-all;还是不换行呢?_html/css_WEB-ITnose