CSS中的居中:完全指导

当前位置 : 首页 > 网页制作 > CSS > CSS中的居中:完全指导

CSS中的居中:完全指导

来源: 作者: 时间:2016-01-20 09:22
水平居中:Horizontally 1 行内元素 text-align : center; 2 单个块级元素 你可以设置一个块级元素居中,如果你已经设置了这个块元素的宽度(width)的话,设置其margin-left和margin-right为auto就可
水平居中: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是否可以利用3的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;
}
 
Tag:

相关文章

网友评论

<