在Web前端开发中,元素居中是一个普遍常见的问题,CSS实现的方法也是有很多种,那么哪一种才算最适合当前居中需求的解决方案呢?本文列出几种CSS使元素居中的方法,读者朋友可以对号入座,选择最适合的居中方法。
CSS的居中问题是一个经常被抱怨的东西。为啥居个中要这么麻烦?我觉得可能问题不在于难,而在于每次一查,有各种各样的解决方案,你选了一个,能正常地居中了,但是心里又会在想:选这个是不是最好的呢?会不会有什么问题?
各种犹豫不决?那就来创建一个决策树吧!
水平居中
是inline元素或者inline-*元素吗?(比如text或者links)?
给inline元素一个block的父元素,然后设置父元素css为text-align:center 即可搞定。
- .center-children {
- text-align: center;
- }
是block块元素吗?
把一个块级元素的margin-left和margin-right设置成auto,再给定一个固定的width,即可水平居中。一般我们会写成:margin:0 auto;
- .center-me {
- margin: 0 auto;
- }
有多个block块级元素的话,怎么居中?
如果你想在一行里让多个块级元素居中,你可以把这些块级元素的display设置成inline-block(同时注意设置这些元素的父级元素text-align:center),或者使用flexbox.
- .inline-block-center {
- text-align: center;
- }
- .inline-block-center div {
- display: inline-block;
- text-align: left;
- }
如果使用flexbox,直接对父元素做如下设置即可:
- .flex-center {
- display: flex;
- justify-content: center;
- }
垂直居中
是inline元素或者inline-*元素吗?(比如text或者links)?
单行?
1.设置相同的padding-top和padding-bottom.
2.如果1不能使用,可以尝试将元素的line-height和height设置成相等的值。
- .link {
- padding-top: 30px;
- padding-bottom: 30px;
- }
- .center-text-trick {
- height: 100px;
- line-height: 100px;
- whitewhite-space: nowrap;
- }
多行?
设置相同的padding-top和padding-bottom.
如果1不能使用,也许text所在的元素是一个table cell,可以使用 vertical-align来处理。也可以使用flexbox.
- .center-table p {
- display: table-cell;
- margin: 0;
- background: black;
- color: white;
- padding: 20px;
- border: 10px solid white;
- 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;
- }
水平垂直居中
一般结合上面两个技巧就可以做到水平和垂直居中。不过也可以分成下面这三个阵营:
元素有固定的宽度和高度(设置absolute,50%,50%的值配合使用负的长度和宽度值可以很好地得到跨浏览器的支持)
- .parent {
- position: relative;
- }
- .child {
- width: 300px;
- height: 100px;
- padding: 20px;
- position: absolute;
- top: 50%;
- left: 50%;
- margin: -70px 0 0 -170px;
- }
元素没有固定的宽度和高度(在top和left上同时使用transform属性和负的translate百分数,注意这里的百分数是基于当前元素的)
- .parent {
- position: relative;
- }
- .child {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- }
可以使用flexbox吗?注意两个方向上都要设置center
- .parent {
- display: flex;
- justify-content: center;
- align-items: center;
- }
- 我的微信
- 微信扫一扫
-
- 我的微博
- 微博扫一扫
-
评论