内容简介:在块级父元素中让内联元素居中。如果要让多个块级元素在同一水平线上居中,那么可以修改它们的CSS:
在块级父元素中让内联元素居中。
块级元素
多个块级元素
如果要让多个块级元素在同一水平线上居中,那么可以修改它们的 display
值。这里有两个示例,其中一个使用了 inline-block
的显示方式,另一个使用了 flexbox
的显示方式。 HTML:
<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> 复制代码
CSS:
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
来实现。 HTML:
<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> 复制代码
CSS:
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
就可以实现垂直居中。
如果不能使用 padding
属性来实现垂直居中,而且已知文本不会换行,那么就可以让 line-height
和 height
相等,从而实现垂直居中。
多行
对于多行文本,同样可以使用等值 padding-top
和 padding-bottom
的方式实现垂直居中。如果你在使用过程中发现这种方法没见效,那么你可以通过 CSS 为文本设置一个类似 table-cell
的父级容器,然后使用 vertical-align
属性实现垂直居中。 HTML:
<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> 复制代码
CSS:
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; /* default is vertical-align: middle; */ } .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
的元素来说,它的每一个子元素都是垂直居中的。
上述方法只适用于父级容器拥有确定高度的元素。如果上述方法都不起作用,那么你就需要使用被称为幽灵元素(ghost element)的解决方式:在垂直居中的元素上添加伪元素,设置伪元素的高等于父级容器的高,然后为文本添加 vertical-align: middle;
样式,即可实现垂直居中。
HTML:
<div class="ghost-center"> <p>I'm vertically centered multiple lines of text in a container. Centered with a ghost pseudo element</p> </div> 复制代码
CSS:
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; } 复制代码
块级元素
已知元素高度
.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; */ } 复制代码
元素高度未知
如果我们不知道元素的高度,那么就需要先将元素定位到容器的中心位置,然后使用 transform
的 translate
属性,将元素的中心和父容器的中心重合,从而实现垂直居中。
使用flexbox
水平垂直居中
宽高固定
设定父级容器为相对定位的容器,设定子元素绝对定位的位置 position: absolute; top: 50%; left: 50%
,最后使用负向 margin
实现水平和垂直居中, margin
的值为宽高(具体的宽高需要根据实际情况计算 padding
)的一半。
宽高未知
如果无法获取确定的宽高,同样需要设定父级容器为相对定位的容器,设定子元素绝对定位的位置position: absolute; top: 50%; left: 50%
。不同的是,接下来需要使用
transform: translate(-50%, -50%);
实现垂直居中。
使用transform
有一个缺陷,就是当计算结果含有小数时(比如
0.5
),会让整个元素看起来是模糊的,一种解决方案就是为父级元素设置
transform-style: preserve-3d;
样式。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。