CSS中的多种居中方式

aristark 发布于2019-08-29 17:25 / 758人阅读

摘要：同样，需要水平居中就加上水平居中块级元素，设置固定宽度，左右等于行级元素居中对块级的父级使用，能让内部的匿名行盒文字行内元素元素在父亲里水平居中我的博客即将同步至腾讯云社区，邀请大家一同入驻

前言

CSS居中一直是我想要整理记录的，拖了很久，今天就顺便整理一下

居中的多种方式 flex布局居中

是我目前使用最多的一种方式，flex布局也是现在最方便的一种布局，广泛用于pc端和移动端

.container{
    display: flex;
    align-items: center;
    justify-content: center;
}

grid布局居中

grid布局是一种比flex更加强大的布局，但是目前兼用性并不好，我使用的并不多，但也能实现居中

.container {
    display: grid;
    align-items: center;
    justify-content: center;
}

display: table-cell

传统中比较新的方法，我用的不多，需要水平居中就加上 text-align: center;

.container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

绝对定位

传统方法，适用于绝对定位

.container {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

特殊的方法

利用vertical-align: middle的特性和中线对齐,用伪元素将内部撑高，需要水平居中就加上 text-align: center。

.container {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    text-align: center;
}
.container::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
}

简单方法垂直居中

如果不加固定高度使用padding让上下padding相等就可以实现垂直居中了，需要水平居中就加上 text-align: center，适用于一些较简单的场景

.container {
    padding: 10px 40px;
    text-align: center;
}

单行文本固定行高垂直居中

如果需要固定高度，然后实现垂直居中，可以将高度设置成行高。同样，需要水平居中就加上 text-align: center;

.container{
    line-height: 50px;
    text-align:center;
    height: 50px;
}

水平居中

块级元素，设置固定宽度，左右margin等于auto

div{
    width: 200px;
    margin: 0 auto;
}

行级元素居中

对块级的父级使用，能让内部的匿名行盒(文字)、行内元素(span)、inline-block元素在父亲里水平居中

.container{
    text-align: center;
}

我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/dev...

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114314.html

CSS中的多种居中方式

摘要：同样，需要水平居中就加上水平居中块级元素，设置固定宽度，左右等于行级元素居中对块级的父级使用，能让内部的匿名行盒文字行内元素元素在父亲里水平居中我的博客即将同步至腾讯云社区，邀请大家一同入驻前言 CSS居中一直是我想要整理记录的，拖了很久，今天就顺便整理一下居中的多种方式 flex布局居中是我目前使用最多的一种方式，flex布局也是现在最方便的一种布局，广泛用于pc端和移动端 ....

junfeng777 2019-08-02 12:08 评论0 收藏0
CSS3新增的伪类有哪些与居中div的多种方法

摘要：新增伪类有那些选择属于其父元素的首个元素选择属于其父元素的最后元素属于父元素的特定类型的唯一子元素属于父元素的唯一子元素的每个元素选择父元素的第二个子元素在元素之前添加内容在元素之后添加内容已启用控制表单为禁用状态，不可点击 CSS3新增伪类有那些？ p:first-of-type:选择属于其父元素的首个元素 p:last-of-type:选择属于其父元素的最后元素 p:only-o...

mcterry 2019-08-30 15:56 评论0 收藏0
CSS垂直居中，你会多少种写法？

摘要：如果我们直接可以计算出正确的和值，岂不是一次到位函数正有此功能，当然我们需要知道子元素的宽高效果是一个作用于内联元素的属性。内联元素的特性是会和其它内联元素或者文字在同一行显示，但是默认情况下是与父元素基线对齐的。 CSS控制居中是前端开发中非常常用的布局技能，本文列出几种CSS控制元素居中的几种方法。谈及HTML元素居中展示，涉及到水平居中和垂直居中，以及水平垂直居中。由于H...

caohaoyu 2019-08-29 18:43 评论0 收藏0
如何居中一个元素（终结版）

摘要：源代码演示利用将要水平排列的块状元素设为，然后在父级元素上设置，达到与上面的行内元素的水平居中一样的效果。前言本文主要介绍水平居中，垂直居中，还有水平垂直居中各种办法，思维导图如下： showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思维导图，请猛戳Github个人博客一、水平居中 1.行内元素水平居...

Hydrogen 2019-08-29 16:56 评论0 收藏0
如何居中一个元素（终结版）

摘要：源代码演示利用将要水平排列的块状元素设为，然后在父级元素上设置，达到与上面的行内元素的水平居中一样的效果。前言本文主要介绍水平居中，垂直居中，还有水平垂直居中各种办法，思维导图如下： showImg(https://segmentfault.com/img/bVblwhg?w=1334&h=563); 如需本文的思维导图，请猛戳Github个人博客一、水平居中 1.行内元素水平居...

hlcc 2019-08-02 11:43 评论0 收藏0