水平居中 行内或类行内元素(比如文本和链接) 在块级父容器中让行内元素居中,只需使用 text-align: center;
1 2 3 4 5 6 7 8 9 10 <header > This text is centered. </header > <nav role ='navigation' > <a href ="#0" > One</a > <a href ="#0" > Two</a > <a href ="#0" > Three</a > <a href ="#0" > Four</a > </nav >
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 body { background : #f06d06 ; } header , nav { text-align : center; background : white; margin : 20px 0 ; padding : 10px ; } nav a { text-decoration : none; background : #333 ; border-radius : 5px ; color : white; padding : 3px 8px ; }
这种方法可以让 inline/inline-block/inline-table/inline/flex 等类型的元素实现居中。
块级元素 让块级元素居中的方法就是设置 margin-left 和 margin-right 为 auto(前提是已经为元素设置了适当的 width 宽度,否则块级元素的宽度会被拉伸为父级容器的宽度)。
1 2 3 4 5 <main > <div class ="center" > I'm a block level element and am centered. </div > </main >
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 body { background : #f06d06 ; } main { background : white; margin : 20px 0 ; padding : 10px ; } .center { margin : 0 auto; width : 200px ; background : black; padding : 20px ; color : white; }
无论父级容器和块级元素的宽度如何变化,都不会影响块级元素的居中效果。
请注意,float 属性是不能实现元素居中的。
多个块级元素 如果要让多个块级元素在同一水平线上居中,那么可以修改它们的 display 值。这里有两个示例,其中一个使用了 inline-block 的显示方式,另一个使用了 flexbox 的显示方式:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <main class ="inline-block-center" > <div > I'm an element that is block-like with my siblings and we're centered in a row. </div > <div > I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do. </div > <div > I'm an element that is block-like with my siblings and we're centered in a row. </div > </main > <main class ="flex-center" > <div > I'm an element that is block-like with my siblings and we're centered in a row. </div > <div > I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do. </div > <div > I'm an element that is block-like with my siblings and we're centered in a row. </div > </main >
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 body { background : #f06d06 ; font-size : 80% ; } main { background : white; margin : 20px 0 ; padding : 10px ; } main div { background : black; color : white; padding : 15px ; max-width : 125px ; margin : 5px ; } .inline-block-center { text-align : center; } .inline-block-center div { display : inline-block; text-align : left; } .flex-center { display : flex; justify-content : center; }
如果你想让多个垂直堆栈的块元素,那么仍然可以通过设置 margin-left 和 margin-right 为 auto 来实现:
1 2 3 4 5 6 7 8 9 10 11 <main > <div > I'm an element that is block-like with my siblings and we're centered in a row. </div > <div > I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do. </div > <div > I'm an element that is block-like with my siblings and we're centered in a row. </div > </main >
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 body { background : #f06d06 ; font-size : 80% ; } main { background : white; margin : 20px 0 ; padding : 10px ; } main div { background : black; margin : 0 auto; color : white; padding : 15px ; margin : 5px auto; } main div :nth-child(1) { width : 200px ; } main div :nth-child(2) { width : 400px ; } main div :nth-child(3) { width : 125px ; }
垂直居中 行内或类行内元素(比如文本和链接) 单行 单行行内或者文本元素,只需为它们添加等值的 padding-top 和 padding-bottom 就可以实现垂直居中
1 2 3 4 5 6 <main > <a href ="#0" > We're</a > <a href ="#0" > Centered</a > <a href ="#0" > Bits of</a > <a href ="#0" > Text</a > </main >
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 ody { background : #f06d06 ; font-size : 80% ; } main { background : white; margin : 20px 0 ; padding : 50px ; } main a { background : black; color : white; padding : 40px 30px ; text-decoration : none; }
如果因为某些原因我们不能使用 padding 属性来实现垂直居中,而且已知文本不会换行,那么就可以让 line-height 和 center 相等,从而实现垂直居中:
1 2 3 4 5 <main > <div > I'm a centered line. </div > </main >
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 body { background : #f06d06 ; font-size : 80% ; } main { background : white; margin : 20px 0 ; padding : 40px ; } main div { background : black; color : white; height : 100px ; line-height : 100px ; padding : 20px ; width : 50% ; white-space : nowrap; }
多行 对于多行文本,同样可以使用等值 padding-top 和 padding-bottom 的方式实现垂直居中。如果你在使用过程中发现这种方法没见效,那么你可以通过 CSS 为文本设置一个类似 table-cell 的父级容器,然后使用 vertical-align 属性实现垂直居中:
1 2 3 4 5 6 7 8 9 10 11 <table > <tr > <td > I'm vertically centered multiple lines of text in a real table cell. </td > </tr > </table > <div class ="center-table" > <p > I'm vertically centered multiple lines of text in a CSS-created table layout.</p > </div >
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 body { background : #f06d06 ; font-size : 80% ; } table { background : white; width : 240px ; border-collapse : separate; margin : 20px ; height : 250px ; } table td { background : black; color : white; padding : 20px ; border : 10px solid white; } .center-table { display : table; height : 250px ; background : white; width : 240px ; margin : 20px ; } .center-table p { display : table-cell; margin : 0 ; background : black; color : white; padding : 20px ; border : 10px solid white; vertical-align : middle; }
此外,你还可以使用 flexbox 实现垂直居中,对于父级容器为 display: flex 的元素来说,它的每一个子元素都是垂直居中的
1 2 3 <div class ="flex-center" > <p > I'm vertically centered multiple lines of text in a flexbox container.</p > </div >
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 body { background : #f06d06 ; font-size : 80% ; } div { background : white; width : 240px ; margin : 20px ; } .flex-center { background : black; color : white; border : 10px solid white; display : flex; flex-direction : column; justify-content : center; height : 200px ; resize : vertical; overflow : auto; } .flex-center p { margin : 0 ; padding : 20px ; }
值得注意的是,上述方法只适用于父级容器拥有确定高度的元素。
如果上述方法都不起作用,那么你就需要使用被称为幽灵元素(ghost element)的非常规解决方式:在垂直居中的元素上添加伪元素,设置伪元素的高等于父级容器的高,然后为文本添加 vertical-align: middle; 样式,即可实现垂直居中。
1 2 3 <div class ="ghost-center" > <p > I'm vertically centered multiple lines of text in a container. Centered with a ghost pseudo element</p > </div >
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 body { background : #f06d06 ; font-size : 80% ; } div { background : white; width : 240px ; height : 200px ; margin : 20px ; color : white; resize : vertical; overflow : auto; padding : 20px ; } .ghost-center { position : relative; } .ghost-center ::before { content : " " ; display : inline-block; height : 100% ; width : 1% ; vertical-align : middle; } .ghost-center p { display : inline-block; vertical-align : middle; width : 190px ; margin : 0 ; padding : 20px ; background : black; }
块级元素 已知元素的高度 无法获知元素的具体高度是非常常见的一种状况,比如:视区宽度变化,会触发布局重绘,从而改变高度;对文本施加不同的样式会改变高度;文本的内容量不同会改变高度;当宽度变化时,对于宽高比例固定的元素(比如图片),也会自动调整高度……
如果我们知道元素的高度,可以这样来实现垂直居中:
1 2 3 4 5 6 7 <main > <div > I'm a block-level element with a fixed height, centered vertically within my parent. </div > </main >
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 body { background : #f06d06 ; font-size : 80% ; } main { background : white; height : 300px ; margin : 20px ; width : 300px ; position : relative; resize : vertical; overflow : auto; } main div { position : absolute; top : 50% ; left : 20px ; right : 20px ; height : 100px ; margin-top : -70px ; background : black; color : white; padding : 20px ; }
未知元素的高度 如果我们不知道元素的高度,那么就需要先将元素定位到容器的中心位置,然后使用 transform 的 translate 属性,将元素的中心和父容器的中心重合,从而实现垂直居中著作权归作者所有。
1 2 3 4 5 6 7 <main > <div > I'm a block-level element with an unknown height, centered vertically within my parent. </div > </main >
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 body { background : #f06d06 ; font-size : 80% ; } main { background : white; height : 300px ; margin : 20px ; width : 300px ; position : relative; resize : vertical; overflow : auto; } main div { position : absolute; top : 50% ; left : 20px ; right : 20px ; background : black; color : white; padding : 20px ; transform : translateY (-50% ); resize : vertical; overflow : auto; }
flexbox 使用 flexbox 实现垂直居中非常简单:
1 2 3 4 5 6 7 <main > <div > I'm a block-level element with an unknown height, centered vertically within my parent. </div > </main >
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 body { background : #f06d06 ; font-size : 80% ; } main { background : white; height : 300px ; width : 200px ; padding : 20px ; margin : 20px ; display : flex; flex-direction : column; justify-content : center; resize : vertical; overflow : auto; } main div { background : black; color : white; padding : 20px ; resize : vertical; overflow : auto; }
水平且垂直居中 通过组合水平居中和垂直居中的技巧,可以实现非常完美的居中效果。我觉得可以将它们分为三种类型
宽高固定元素 设定父级容器为相对定位的容器,设定子元素绝对定位的位置 position: absolute; top: 50%; left: 50%,最后使用负向 margin 实现水平和垂直居中,margin 的值为宽高(具体的宽高需要根据实际情况计算 padding)的一半。
1 2 3 4 5 6 7 <main > <div > I'm a block-level element a fixed height and width, centered vertically within my parent. </div > </main >
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 body { background : #f06d06 ; font-size : 80% ; padding : 20px ; } main { position : relative; background : white; height : 200px ; width : 60% ; margin : 0 auto; padding : 20px ; resize : both; overflow : auto; } main div { background : black; color : white; width : 200px ; height : 100px ; margin : -70px 0 0 -120px ; position : absolute; top : 50% ; left : 50% ; padding : 20px ; }
宽高不固定元素 如果无法获取确定的宽高,同样需要设定父级容器为相对定位的容器,设定子元素绝对定位的位置 position: absolute; top: 50%; left: 50%。不同的是,接下来需要使用 transform: translate(-50%, -50%); 实现垂直居中:
1 2 3 4 5 6 7 <main > <div > I'm a block-level element of an unknown height and width, centered vertically within my parent. </div > </main >
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 body { background : #f06d06 ; font-size : 80% ; padding : 20px ; } main { position : relative; background : white; height : 200px ; width : 60% ; margin : 0 auto; padding : 20px ; resize : both; overflow : auto; } main div { background : black; color : white; width : 50% ; transform : translate (-50% , -50% ); position : absolute; top : 50% ; left : 50% ; padding : 20px ; resize : both; overflow : auto; }
使用 transform 有一个缺陷,就是当计算结果含有小数时(比如 0.5),会让整个元素看起来是模糊的,一种解决方案就是为父级元素设置 transform-style: preserve-3d; 样式:
1 2 3 4 5 6 7 8 9 10 11 .parent-element { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .element { position: relative; top: 50%; transform: translateY(-50%); }
flexbox 使用 flexbox 实现水平和垂直居中,只需使用两条居中属性即可:
1 2 3 4 5 6 7 <main > <div > I'm a block-level-ish element of an unknown width and height, centered vertically within my parent. </div > </main >
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 body { background : #f06d06 ; font-size : 80% ; padding : 20px ; } main { background : white; height : 200px ; width : 60% ; margin : 0 auto; padding : 20px ; display : flex; justify-content : center; align-items : center; resize : both; overflow : auto; } main div { background : black; color : white; width : 50% ; padding : 20px ; resize : both; overflow : auto; }