水平居中+垂直居中

页面结构都是:

<div class="parent" style="background-color:red;width: 400px;height: 400px;">
    <div class="child" style="background-color:blue;width: 200px;height: 200px;"></div>
</div>

一、水平居中

1.设置父元素和子元素,inline-block+text-align:ie6↑

.parent {
    text-align: center;
}

.child {
    display: inline-block;
}

2.设置子元素,table+margin: ie8

.child {
    display:table;
    margin:0 auto;
}

3.设置父元素和子元素,absolute+transform:ie10

.parent {
    position:relative;
}
.child {
    position:absolute;
    left:50%;
    transform:translateX(-50%);
}

4.设置父元素和子元素,flex+margin:ie9

.parent {
    display:flex;
}
.child {
    margin:0 auto;
}

5.设置父元素,flex+justify-content:ie9

.parent {
    display:flex;
    justify-content:center;
}

二、垂直居中

1.设置父元素,table-cell+vertical-align:ie8

.parent {
    display:table-cell;
    vertical-align:middle;
}

2.设置父元素和子元素,absolute+transform:ie10

.parent {
    position:relative;
}
.child {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}

3.设置父元素,flex+align-items:ie9

.parent {
    display:flex;
    align-items:center;
}

三、水平+垂直

1.设置父元素和子元素,absolute+transform:ie10

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

2.设置父元素和子元素,inline-block+text-align+table-cell+vertical-align:ie8

.parent {
    text-align:center;
    display:table-cell;
    vertical-align:middle;
}
.child {
    display:inline-block;
}

3.设置父元素,flex+justify-content+align-items:ie9

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

原文地址:https://www.cnblogs.com/zgdawdl/p/10022962.html

时间: 2024-11-13 03:02:22

水平居中+垂直居中的相关文章

css居中-水平居中,垂直居中,上下左右居中

网页布局居中必不可少,其中包括水平居中,垂直居中,上下左右居中,下面一一详述. 水平居中 <div class="container"> <div class="item">居中</div> </div> 1.text-align: center; 对父元素设置text-align: center;子元素即可居中.但子元素是有限制的,只对图片,文字等行内元素有效. 如果子元素有一定宽度,可以设置子元素display:i

16种方法实现水平居中垂直居中

时间:2017-04-24 00:09:58      阅读:29      评论:0      收藏:0      [点我收藏+] 转载下别人收集的定位方法,写的比较详细,比如子元素定位要先考虑父元素的是行内元素还是块内元素,transform灵活运用等等. 水平居中 1) 若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中. 2) 若是块级元素, 该元素设置 margin:0 auto即可. 3) 若子元素包含 float:left 属性, 为了让子

水平居中&amp;垂直居中

在用html设计计算器时,对于水平居中和垂直居中很不解,查了一些资料,下面这篇博文内容充实,通俗易懂,我很快就get到了精髓,在阅读之前我先贴上几张做计算器的代码截图,用案例说明一下水平居中的 含义: 要让#keys代表的按键钮空间水平居中,它是块级元素,就可以把它的父元素中设置margin:15px auto; 目录 水平居中 行内元素 块级元素 方案一:(分宽度定不定两种情况) 方案二:使用定位属性 方案三:使用flexbox布局实现(宽度定不定都可以) 垂直居中 单行的行内元素 多行的行内

水平居中、垂直居中、水平垂直居中

参考:https://www.w3cplus.com/css/centering-css-complete-guide.html 一.水平居中 1.行内元素: text-align:center即可 2.块级元素[固定宽度]: (1).一个固定宽度的块级元素,使用margin:0 auto即可 css: .has_width_block { width: 200px; background: deeppink; margin: 0 auto; } html: <div class="has

&lt;转载&gt;使CSS文字图片div元素居中方法之水平居中的几个方法

文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决的时候相对来说通过css比较容易设置,垂直居中相对比较棘手. 先来说一下水平居中的不同情况与不同解决方法吧. 1文本,图片等行内元素的水平居中方法呢比较简单.直接给父元素设置一个text-align:centent属性就可以实现元素的水平居中了. 2 确定宽度的块级元素水平居中怎么设置呢?设置方法也

图片垂直水平居中

前端布局,垂直水平居中是经常遇到的一个场景.水平居中较为容易,垂直居中则需变通处理,特别是图片的居中. 行内元素居中, 包括文本,图片,表单元素等,display属性为inline的元素 水平居中原理: text-align:center 实现水平居中 垂直居中原理:利用 line-height 等于 height 块元素居中,display属性为block的元素 水平居中原理:利用 margin:0 auto 实现 垂直居中原理:利用 vertical-align 实现垂直居中,决定行高的是行

布局-水平垂直居中

结构: 1 <div class="parent"> 2 <div class="child">DEMO</div> 3 </div> 样式: 1.解决方案一:text-align + inline-block + table-cell + vertical-align(结合前面的水平居中+垂直居中) 1 .parent { 2 background-color: grey; 3 width: 300px; 4 hei

元素不定宽在页面上面,水平垂直居中

如果你曾经研究过图片水平垂直居中的方法,那么下面这几个方法你肯定知道 下面介绍的方法主要是利用display:inline-block;让元素变为行内块元素,利用vertical-align:middle来实现垂直居中,利用父元素的text-align:center;实现水平居中. 一.表格方法表格本来对立面的内容是垂直居中的,所以用表格来做很适合.但是它里面的内容是行内元素才行,所以下面的代码就可以实现.<style>*{margin:0px; padding:0px;}table {pos

hmtl div水平、垂直居中

最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单.水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法 下面说两种在屏幕正中(水平居中+垂直居中)的方法放上示范的html代码: <body>    <div class="main">        <h1>MAIN</h1>    </div></body> 方法一: div使用