如何让元素水平垂直居中

Jason 发布于2019-08-29 12:31 / 2376人阅读

摘要：我们经常遇到需要把中的内容进行水平和垂直居中多数是将图片水平垂直居中，这里把我常用的一些方法总结一下，可能比较，烦请大家指正方法需要有两个容器包住，上代码页面效果页面效果代码兼容容器中只有一个，没有其他元素，可通过方

我们经常遇到需要把div中的内容进行水平和垂直居中（多数是将图片水平垂直居中），这里把我常用的一些方法总结一下，可能比较low，烦请大家指正

table-cell方法
需要有两个容器包住img，上代码：

HTML

CSS

*{
    padding:0;
    margin:0;
}
.box{
    background-color:#eee;
    border:2px solid #000;
    width:500px;
    height:500px;
    margin:50px auto;
    display:table;
}
.wrapper{
    text-align:center;
    display:table-cell;
    vertical-align:middle;
}

IE8/Firefox/Chrome/Safari/Opera页面效果：

IE6/IE7页面效果：

IE6/7代码兼容：

容器中只有一个img，没有其他元素，可通过vertical-align方法居中
当容器中只有一个img，并且img的状态是行内元素时，可以通过设置行高为容器高度，设置img的vertical-align：middle居中，代码：

div{
    height:300px;
    line-height:300px;
    text-align:center;
}
div > img{
    vertical-align:middle;
}

已知要居中元素的宽高，可以通过定位的方法来实现垂直水平居中
比如说要将div中的img居中，已知img高度规定为300*200，则代码如下：

div{
    position:relative;
}
div > img{
    width:300px;
    height:200px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-100px;
    margin-left:-150px;
}

还有一种定位方法
html

css

.dad{
    position:relative;
}
.son{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;  //这是必须的
}

服务器托管私有云水平垂直居中 asp如何让字体居中 html如何让块居中垂直居中

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

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

如何居中一个元素（终结版）

摘要：源代码演示利用将要水平排列的块状元素设为，然后在父级元素上设置，达到与上面的行内元素的水平居中一样的效果。前言本文主要介绍水平居中，垂直居中，还有水平垂直居中各种办法，思维导图如下： 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
如何居中一个元素（终结版）

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

Meils 2019-08-23 12:20 评论0 收藏0
css 元素居中

摘要：一水平居中行内元素水平居中在父元素上设置使文字图片水平居中。结果如图块级元素的宽高不固定，就不能用负了使用百分比是相对于父元素的宽度。代码结果实现代码设置宽高以显示居中效果弹性布局垂直居中水平居中一：水平居中 1、行内元素水平居中在父元素上设置 text-align: center 使文字/图片水平居中。 .container { text-align: center; } 2...

AZmake 2019-08-29 17:16 评论0 收藏0
CSS居中

摘要：备份及更新说明表示要被居中的元素，表示要居中的元素的父元素包含元素的元素。左右居中要居中的块级元素元素设置。网格布局居中根据需要布局网格，将要居中的元素摆放在网格中间即可。 [TOC]备份及更新说明 .center表示要被居中的元素，.wrap 表示要居中的元素的父元素（包含.center元素的元素）。为了便于理解和叙述同一：对于文本内容居中的情况，.wrap就是指包含文...

刘永祥 2019-08-29 14:04 评论0 收藏0