CSS中常见的水平垂直居中的实现方法有哪些？CSS中三种常见的水平垂直居中

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了CSS中常见的水平垂直居中的实现方法有哪些？CSS中三种常见的水平垂直居中，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1817字，纯文字阅读大概需要3分钟。

内容图文

当不知道子元素的宽和高的时候，如何实现子元素的水平垂直居中，这里总结了几种方法：

1、利用定位和transform实现

HTML和CSS代码如下：

<div class="super-div">
        <div class="sub-div">利用定位和transform
            <br/>实现水平垂直居中</div>
</div>
 
 .super-div {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
 
 .sub-div {
            background-color: green;
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /* top left 分别相对于父元素的高度和宽度，translate相对于自身的宽度和高度 */
        }

这种实现方式的核心在于注释部分，相对定位的时候，top和left都是相对于父元素的高度和宽度计算，而transform是相对与自身宽高计算； 效果如下：

2、利用table-cell布局实现

HTML和CSS代码实现如下：

     <div class="super-div table">
        <div class="table-cell">利用table-cell
            <br/>实现水平垂直居中</div>
    </div> 
 
 
   .super-div {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
 
   .table {
            display: table;
        }
 
   .table-cell {
            display: table-cell;
            /*垂直居中*/
            vertical-align: middle;
            /*水平居中*/
            text-align: center;
            background-color: green;
        }

父元素设置table布局，子元素设置为table-cell布局。然后实现子元素的垂直水平居中，效果如下：

3、利用flex布局实现

HTML和CSS代码如下：

<div class="super-div flex">
        <div class="flex-center">利用flex布局
            <br/>实现水平垂直居中</div>
</div> 
 
.super-div {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
 
 .flex {
            display: flex;
            /*flex布局*/
            justify-content: center;
            /*使子项目水平居中*/
            align-items: center;
            /*使子项目垂直居中*/
        }
 
 .flex-center {
            background-color: green;
        }

实现效果如下：

相关文章推荐：

CSS中table表格的两种使用方法（实例）

多列布局的概念是什么？CSS多列布局的应用（实例代码）

以上就是CSS中常见的水平垂直居中的实现方法有哪些？CSS中三种常见的水平垂直居中的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的CSS中常见的水平垂直居中的实现方法有哪些？CSS中三种常见的水平垂直居中全部内容，希望文章能够帮你解决CSS中常见的水平垂直居中的实现方法有哪些？CSS中三种常见的水平垂直居中所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端