欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS中的居中:完全指导_html/css_WEB-ITnose

程序员文章站 2022-05-21 11:23:25
...
水平居中:Horizontally

1.行内元素

text-align : center;

2.单个块级元素

你可以设置一个块级元素居中,如果你已经设置了这个块元素的宽度(width)的话,设置其margin-left和margin-right为auto就可以。如果你没有设width,块级元素通常会占满其父元素显示。

{

width : 200px;

margin : 0 auto;

}

通常情况下你不能让一个浮动元素居中

3.多个块级元素在一行内水平居中

此时你可以修改这些块级元素的display属性为inline-block或flexbox。

inline-block的情况

//父元素设置text-align为center

.inline-block-center{

text-align : center;

}

//子元素设置display为inline-block

.inline-block-center div{

display : inline-block;

text-align : left;

}


flexbox的情况:

直接设置父元素的display为flex,将父元素作为弹性伸缩盒显示

.flex-center{

display : flex;

justify-content : center;

}

垂直居中:Vertically

1.行内元素

1.1单行行内元素

有时候行内元素或文本元素看上去垂直居中,仅仅是因为其上下内边距设置了相同的值。

.link{

padding-top : 30px;

padding-bottom : 30px;

}

如果有时候你不想选择padding,那还有一种方法就是设置line-height的值与height的值相等。

.center-text-trick{

height : 100px;

line-height : 100px;

white-space : nowrap;

}


1.2多行元素

设置相同的padding-top和padding-bottom对多行元素也会产生垂直居中的效果。

但是如果padding设置不好使的时候,我们也可以使用table和table-cell。对display为table-cell的元素使用vertical-align为middle即可。

.center-table {

display : table;

height : 250px;

width : 240px;

background-color : white;

}

.center-table p {

display : table-cell;

margin : 0;

background-color : black;

color : white;

vertical-align : middle;

}

如果table过时了,那你可以尝试一下flexbox,一个flex子元素可以在其flex父元素中很简单的居中。

.flex-center-vertically{

display : flex;

justify-content : center;

flex-direction : column;

}

注意:垂直居中的条件必须是其父元素有一个固定的高度height。

如果以上几种垂直居中的方法就失效了,那就只能'ghost element'技术,用伪元素(pseudo element)了。一个满高的伪元素被放置在父容器中,要垂直居中的元素和它一起居中。

.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;

}

2.块级元素

2.1知道元素的高度?

在网页布局中,不知道某个块元素的高度是很常见的,因为当块元素的宽度改变时,其内容也会随着改变高度。文本样式的变化也会改变文本的总体高度。文本内容大小的变化也会改变文本的总体高度。

有固定高宽比例的元素。比如img,当其调整大小时,也会改变高度。

但如果你知道元素的高度,那改元素垂直居中可以这样写:

.parent{

position : relative;

}

.child{

position : absolute;

top : 50%;

height : 100px;

margin : -50px;

}

2.2不知道元素的高度

我们还是可以把该元素先压到父元素一半的地方,然后再往上轻推一点,具体如下:

.parent{

position : relative;

}

.child{

position : absolute;

top : 50%;

transform : translateY(-50%);

}

2.3是否可以利用CSS3的flexbox呢?

可以的,并且很简单。

.parent{

display : flex;

flex-direction : column;

justify-content : center;

}


3.水平+垂直居中

1.元素有固定的宽度和高度

先对元素绝对定位,让其先定位在父元素的50%/50%处,然后使用负外边距,使其等于元素宽度和高度的一半,具体代码如下

.parent{

position : relative;

}

.child{

width : 300px;

height : 100px;

padding : 20px;

position : absolute;

top : 50%;

left : 50%;

margin : -70px 0 0 -170px;

}

2.元素的宽度和高度未知

如果你不知道元素的宽度和高度,你可以使用CSS3的transition过度属性,使用translate函数,并在X,Y两个方向都移动该元素高宽的-50%。

.parent{

position : relative;

}

.child{

position : absolute;

top : 50%;

left : 50%;

transform : translate(-50%,-50%);

}

3.使用CSS3的flexbox

需要使用flexbox的两个方向上的居中属性,代码如下:

.parent{

display : flex;

justify-content : center;

align-items : center;

}


结论:利用css,你可实现完全的居中。

原文:https://css-tricks.com/centering-css-complete-guide/