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实现居中的7种方法

实现HTML元素的居中 看似简单,实则不然 水平居中比如容易,垂直居中比较难搞定,水平垂直都居中更不容易。在这个响应式布局的年代,很难固定元素的宽高,俺统计了一下,目前至少有六种方法。本文由浅入深逐...
  • chenmoquan
  • chenmoquan
  • 2014年11月28日 15:56
  • 11317

用css实现垂直水平居中的几种方法

1.用line-block和vertical-align来实现居中:这种方法适合于未知宽度高度的情况下。 Title #container{ ...
  • baidu_24024601
  • baidu_24024601
  • 2016年04月12日 11:01
  • 5973

纯CSS完美实现垂直水平居中的6种方式

纯CSS完美实现垂直水平居中的6种方式 时间 2016-07-29 13:12:19 SegmentFault 原文  https://segmentfault.com/a/119...
  • shiyuqiong
  • shiyuqiong
  • 2016年07月30日 22:16
  • 1679

css实现垂直居中的方法

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

学会这些方法,CSS居中布局那都不是事!

居中,在网页web开发的应用场景是非常广泛的,在很多时候居中的设计会更显得美观大方,同时在UI设计中也是很常用的布局手法。所以在学习css布局中,学会居中是必不可少的功课,下面我就简单的介绍在开发中经...
  • lander_xiong
  • lander_xiong
  • 2018年01月14日 21:52
  • 14

实现CSS垂直居中的两种方法

方法一:利用行高(line-height)定位line-height通常是用于调节一段文字的行与行之间的距离,或者说两行文字之间的距离,如果行高是500px,那么每一行中的文字距离本行的顶部就是250...
  • zlb824
  • zlb824
  • 2011年07月16日 20:48
  • 396

纯CSS实现文字一行居中,多行左对齐的方法

纯CSS实现文字一行居中,多行左对齐的方法其实这种需求还是蛮常见的。主要用于产品列表页面,用于产品图片下面,显示产品的名称。但是其纯CSS实现实在是烧脑,一般就放掉这个需求,或者,使用JS实现。但是,...
  • FungLeo
  • FungLeo
  • 2015年11月12日 12:29
  • 21124

使用CSS完美实现垂直居中的方法

使用XHTML+CSS来实现元素的垂直居中一直是前端开发中的一个比较复杂且棘手的问题,作为网页设计师或前端开发工程师,这个垂直居中问题也是必须掌握的技巧之一,一些互联网公司面试题中也会出现这类题目。今...
  • assokoo123
  • assokoo123
  • 2014年03月14日 18:37
  • 1041

css3 让绝对定位元素水平居中的方法

一、绝对定位元素的居中实现 如果要问如何CSS实现绝对定位元素的居中效果,很多人心里已经有答案了。 兼容性不错的主流用法是: 1 2 3 4 5 6 .elemen...
  • qq_27682041
  • qq_27682041
  • 2017年06月30日 15:19
  • 918

CSS实现垂直居中的5种方法

利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。 使用 CSS 实现垂直居中并不容易。有些方法在一些浏览...
  • sinat_21396411
  • sinat_21396411
  • 2015年09月20日 16:10
  • 712
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS各种居中方法
举报原因:
原因补充:

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