这样:
body{ margin:0padding:0width:100%
height:100%
} div{ position:absolutetop:50%left:50%margin-top:-250px margin-left:-250px/*此时宽和高都要固定*/ width:500pxheight:500px} body{
margin:0
padding:0
width:100%
height:100%
}
div{
position:absolute
top:50%
left:50%
margin-top:-250px
margin-left:-250px
/*此时宽和高都要固定*/
width:500px
height:500px
}
扩展资料:注意事项
一、用两个值就可以了
1、text-align:center
//这是让文字左右居中
2、line-height:100px
//这是让文字垂直居中
vertical-align:middle
//这个属性不能让文字垂直居中,该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。
二、多行文本垂直居中分为两种情况,一个是父级元素高度不固定,随着内容变化;另一个是父级元素高度固定。
1、父级元素高度不固定
父级高度不固定的时,高度只能通过内部文本来撑开。可以通过设置内填充(padding)的值来使文本看起来垂直居中,只需设置padding-top和padding-bottom的值相等:
<!--html代码-->
<div id="div1">
这是多行文本垂直居中,
这是多行文本垂直居中,
这是多行文本垂直居中,
这是多行文本垂直居中。
</div>
/*css代码*/
#div1{
width: 300px
margin: 50px auto
border: 1px solid red
text-align: center/*设置文本水平居中*/
padding: 50px 20px
}
2、父级元素高度固定
只对拥有valign特性的元素才生效,结合display: table,可以使得div模拟table属性。因此可以设置父级div的display属性:display: table;然后再添加一个div包含文本内容,设置其display:table-cell和vertical-align:middle。
1、 使用定位,左右拉取方法:
2、使用margin:auto,方法:
1、使用位移方法,兼容性较低,移动端慎用
2、组合使用display:table-cell和vertical-align、text-align,使父元素内的所有行内元素水平垂直居中(内部div设置display:inline-block即可)。
3、用弹性布局实现垂直左右居中
第一步:在img标签后面添加一个span元素
第二步:为这几个元素设置样式
1.把#div1元素设置text-align:center
2.把添加的元素span转化为行内块元素(display:inline-block),并且设置vertical-align:middle
3.为img元素设置vertical-align:middle。
完成以上操作之后,这个Img元素在#div1中就是垂直居中的了,这种方法的兼容性等比较好,唯一的缺点可能就是要在元素后面添加一个元素
(注意:这个元素最好是span元素,如果是div元素的话,在低版本ie下有兼容问题)
这种方法利用了css3的新特性
为#div1设置display:flexvertical-align:middlealign-items:middle。
这种方法的缺点就是只要不支持css3的浏览器,那就不会起作用了。
前言:根据最近学习的课程,简单总结一下学习到的css左右布局以及居中方案。后期学习深入之后再回来进行css居中的完整总结。给所有子元素添加 float: left ,给父元素加 clearfix 类,清除浮动
html:
css:
将内联元素外部的块级元素的 text-align 设置为 center ,即可实现内联元素( inline 、 inline-block )的水平居中。
演示
将固定宽度的块级元素的 margin-left 和 margin-right 设置为 auto ,即可实现块级元素的水平居中。
演示
将每个块级元素的 display 设置为 inline-block ,然后将它们的父容器的 text-align 设置为 center ,即可使多个块级元素水平居中。
演示
设置内联元素的行高( line-heigt )和内联元素的父元素的高度( height )相等,且内联元素的字体大小远小于行高,即可使内联元素垂直居中。
演示
通过绝对定位元素距离顶部50%,并设置margin-top向上偏移元素高度的一半,即可实现垂直居中。
演示
借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中
演示