CSS各种居中方法

最新推荐文章于 2022-09-22 13:40:16 发布

戎码

最新推荐文章于 2022-09-22 13:40:16 发布

阅读量310

点赞数

分类专栏：前端技术

本文链接：https://blog.csdn.net/github_33656641/article/details/52367343

版权

前端技术专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

垂直居中：

单行文本时
定义高度和行高相等设置height值与 line-height值相同
多行文本时
通过设置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>