CSS各种居中方法

原创 2016年08月30日 10:44:49

水平居中:
在当前元素 margin:0 auto




垂直居中:

  1. 单行文本时
    定义高度和行高相等 设置height值 与 line-height值相同
  2. 多行文本时
    通过设置display:table 、display:table-cell属性来设置内容垂直居中 相当于模拟表格的垂直居中

html代码

    <div id="content">
        <div id="center">
            多行<br/>文本
        </div>
    </div>

css代码

        #center{
            margin:0 auto;
            vertical-align: middle;
            display: table-cell;
            border: 1px solid red;
            width: 80px;
            text-align: center;
        }
        #content{
            display: table;
            height:700px;
        }

3.块级元素

html代码

    <div>
        <div id="center">
            对整个DIV块进行垂直居中
        </div>
    </div>

css代码

    #center{
            border: 1px solid red;
            position: absolute;
            margin:auto;
            top:0;
            left:0;
            bottom:0;
            right:0;
            height:30%
        }






CSS3的FlexBox实现居中(趋势)
注:兼容性比较差,IE9及以下版本不兼容

将display属性设置为flex(每个内核都要声明一次)

#display{
    display:flex; //兼容IE10以上
    display: -webkit-flex; //兼容Chrome\Opera等浏览器

设置
水平方向居中:justify-content:center;
垂直方向居中:align-items:center
“一键居中“: 父元素设置 flex,子元素 margin:auto

<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 75px;
    height: 75px;
    margin: auto;
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item">Perfect centering!</div>
</div>

</body>

相关文章推荐

css实现垂直居中的方法

  • 2009年12月16日 13:43
  • 2KB
  • 下载

利用CSS让元素垂直居中的两种实现方法

利用CSS让元素垂直居中是个很头疼的问题,这里就介绍两种简单实用的方法  方法一:利用行高(line-height)定位  line-height通常是用于调节一段文字的行与行...

CSS 元素垂直居中的 6种方法

转自:http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E...

CSS教程:div垂直居中的N种方法[转]

在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中...

纯CSS实现垂直居中的几种方法

垂直居中是布局中十分常见的效果之一,为实现良好的兼容性,PC端实现垂直居中的方法一般是通过绝对定位,table-cell,负边距等方法。有了css3,针对移动端的垂直居中就更加多样化。 方法1:...
  • yisimo
  • yisimo
  • 2017年06月17日 11:02
  • 226

CSS实现元素水平/垂直居中的方法

首先,我们来了解水平居中,它有很多种方法,我们暂时先来了解其中的几种: 1.    在实现方案中,我们最熟悉的莫过于给元素定义一个宽度,然后使用margin: body{     width:...

图片垂直居中的5种css方法

图片垂直居中的css方法今天我要介绍的是采用css进行图片居中的5个方法。首先确定我们的HTML结构(若不特别说明,下面皆采用该HTML结构) 1.此方法会在img标签前加上一个inline-b...

CSS垂直居中网页布局实现的5种方法

CSS 垂直居中 vertical-align

CSS教程:div垂直居中的N种方法[转]

CSS教程:div垂直居中的N种方法[转] 在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS ...

CSS使元素水平垂直居中的方法

1、使用绝对定位(position)和外边距(margin)       适用范围:子级元素(content)宽高固定       方法:(1)将父级 (box)设置成相对定位(relative);(...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS各种居中方法
举报原因:
原因补充:

(最多只允许输入30个字)