让一个元素垂直水平居中的四种方法

第一种方法:

div.box{

weight:200px;

height:400px;

position:absolute;

left:50%;

top:50%;

margin-left:-100px;

margin-top:-200px;

}

*兼容性好;缺点:必须知道元素的宽高


第二种方法:

div.box{

weight:200px;

height:400px;

position:absolute;

left:50%;

top:50%;

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

}

*这是css3里的样式;缺点:兼容性不好,只支持IE9+的浏览器


第三种方法

div.box{

width:200px;

height:400px;

position:absolute;

left:0;

right:0;

top:0;

bottom:0;

margin:auto;

}

*兼容性较好,缺点:不支持IE7以下的浏览器

第四种方法

场景: 一个块状元素A内 有若干个块状元素B,要达到的效果是 ,所有块状元素B 在 元素A 内水平居中显示。

<div class="A">

<div class="B"></div>

<div class="B"></div>

<div class="B"></div>

</div>

首先,我们要设置元素A的大小为500px,设置背景色为green方便查看

.A{

width:500px;

backgrond-color:green;

然后, 设置所有元素B 的宽度为100px,高度为100px,外边据都为5px,背景色为#000方便查看

.B{

width:100px;

height:100px;

magin:5PX;

backgrond-color:green;

当然现在的效果应该是这样的

image

我们要做的就是,先把所有元素B设置为行内块元素,让他们都排成一行, display:inline-block;

image

最后就是让所有的元素B居中了, 到这里,相信很多人就猜到下一步要做什么了,我锦上添花,解释一下。

先想一想,如果是行内元素, 我们一般让它怎么居中呢?答:当然是给它的父容器加一个text-align:center的样式。

这里我们已经把所有的元素B变成了行内块, 也就有了行内元素的特性,所以,我们下一步要做的就是给元素A加text-align:center,

这样我们的目的就达到了,请看效果:

image

完美!

*兼容性较好,父元素和子元素的宽度都要已知

分类: html/css知识总结

标签: html, css, 居中

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • div水平居中的N种方法 一、单行垂直居中 如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要设置它...
    fredah阅读 5,968评论 0 1
  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 9,715评论 0 8
  • 在网页制作的过程中,经常会遇到子元素嵌套在父元素中,需要子元素垂直水平居中的场景。现将子元素水平且垂直居中的几种方...
    林llgb阅读 690评论 1 8
  • 水平居中方案 行内元素的水平居中对父元素设置 text-align: center; 我是行内元素 在父...
    FConfidence阅读 444评论 0 1
  • 01 最近特别喜欢来自萧伯纳的一句话:“想结婚的就结婚吧,想单身的就单身吧,反正你们都会后悔的。” 这句话让我想到...
    因为凹凸曼阅读 147评论 0 2