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>
版权声明: 举报

相关文章推荐

各种居中系列

方法①:margin:0 auto 实现水平居中(必须满足的条件是固定宽度元素) 方法②:text-align:center实现水平居中(测试后在父元素中设置,块级或行内元素可实现,除图片外。其中若父...

CSS各种居中方法

水平居中的text-align:center 和 margin:0 auto   这两种方法都是用来水平居中的,前者是针对父元素进行设置而后者则是对子元素。他们起作用的首要条件是子元素必须没有被f...

精选:深入理解 Docker 内部原理及网络配置

网络绝对是任何系统的核心,对于容器而言也是如此。Docker 作为目前最火的轻量级容器技术,有很多令人称道的功能,如 Docker 的镜像管理。然而,Docker的网络一直以来都比较薄弱,所以我们有必要深入了解Docker的网络知识,以满足更高的网络需求。

CSS各种居中方法

水平居中的text-align:center 和 margin:0 auto这两种方法都是用来水平居中的,前者是针对父元素进行设置而后者则是对子元素。他们起作用的首要条件是子元素必须没有被float影...

CSS各种居中方法

CSS居中方法

【css】谈谈 css 的各种居中——读编写高质量代码有感

转自:http://www.cnblogs.com/yjzhu/archive/2012/11/19/2773209.html css 的居中有水平居中和垂直居中,这两种居中又分为行...
  • ltx06
  • ltx06
  • 2015-04-24 16:48
  • 226

CSS各种居中方式

CSS实现居中的各种方式

css各种居中

原文链接:http://www.cnblogs.com/2050/p/3392803.html 居中是我们使用css来布局时常遇到的情况。使用css来进行居中时,有时一个属性就能搞定...

css之各种居中方法

元素居中可以分为两种,行内元素和块状元素。 行内元素:元素可以在一行内。一行内可以有多个元素。 块状元素:每个元素占一行。一、行内元素(div) 1·设置text-align属性: div元素...

CSS水平居中和垂直居中的各种方法

转自:前端开发-武方博

各种"居中"

#1 文字居中 html css .text-center{height: 100px; line-height: 100px; text-align: center; background-co...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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