水平，垂直居中的15种方法

一.水平居中

1.文字水平居中

测试居中

</div>

<style>

.one{

width: 200px;

height: 100px;

border:1px solid red;

text-align: center;

}

</style>

2.盒子居中

<div class="one">是盒子居中</div>

<style>

.one{

width: 200px;

height: 100px;

border:1px solid red;

margin: 0 auto;

}

</style>

3.多块级元素水平居中

简单不先于复杂

</div>

而是在复杂之后

</div>

简单不先于复杂，而是在复杂之后。

</div>

简单不先

</div>

<style>

.container {

height:100px;

padding: 8px;

text-align: center;

border: 2px dashed #f69c55;

}

.child {

padding: 8px;

width: 4rem;

margin: 0 8px;

color: #fff;

background: #000;

display: inline-block;

}

</style>

4.弹性布局，多块级水平居中

<div>

测试1

</div>

<div>

测试2测试2测试2测试2测试2测试2测试2

</div>

<div>

测试3测试3测试3测试3

</div>

<style>

.flex-center {

width: 800px;

padding: 8px;

display: flex;

　　justify-content: center;

border: 2px dashed #f69c55;

}

.flex-center >div {

padding: 8px;

width: 100px;

margin: 0 8px;

color: #fff;

background: #000;

}

</style>

display: flex;兼容性不好可以这样解决：最少支持ie10以上

.flex-center{ display: -webkit-flex; /* 新版本语法: Chrome 21+ */

　　　　　　 display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */

　　　　　　display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */

　　　　　　display: -moz-box; /* 老版本语法: Firefox (buggy) */ display: -ms-flexbox; /* 混合版本语法: IE 10 */

　　　　 }

.flex-center>div { -webkit-flex: 1; /* Chrome */

　　　　　　　　-ms-flex: 1 /* IE 10 */

　　　　　　　　flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */

　　　　　　　　 -webkit-box-flex: 1 /* OLD - iOS 6-, Safari 3.1-6 */

　　　　　　　　-moz-box-flex: 1; /* OLD - Firefox 19- */

　　　　　　　　}

5.垂直居中

1.元素是display:block和display:inline-block都可以使用height:100px ,line-height:100px;

2.利用display:table-cell

<p class="v-cell">The more technology you learn</p>

</div>

<style>

.center-table {

width: 800px;

display: table;

height: 140px;

border: 2px dashed #f69c55;

}

.v-cell {

display: table-cell;

　　vertical-align: middle;

}

</style>

3.用flex布局

<p>Dance like nobody </p>

</div>

<style>

.center-flex {

width: 500px;

height: 140px;

display: flex;

flex-direction: column;

　　justify-content: center;

border: 2px dashed #f69c55;

}

</style>

4.块级元素固定高度（这个应该是大家最熟悉的，例子就不放了）

.parent {position: relative;
}
.child {position: absolute; top: 50%; height: 100px; margin-top: -50px; }

5.不知高度

<div class="child">世界上有 10 种人，懂二进制的和不懂二进制的。</div>

</div>

<style>

.parent {

height: 140px;

position: relative;

border: 2px dashed #f69c55;

}

.child {

　　position: absolute;

　　top: 50%;

　　transform: translateY(-50%);

background: black;

color: #fff;

padding: 1rem;

width: 12rem;

}

</style>

transform的兼容性：

transform: translate(50px,100px);

-ms-transform: translateY(-50%)     /* IE 9 */
-webkit-transform:  translateY(-50%)    /* Safari and Chrome */
-o-transform: translateY(-50%)/* Opera */
-moz-transform:  translateY(-50%)；   /* Firefox */

三，水平居中，垂直居中

1.固定宽高的水平垂直居中（大家熟悉的）

parent {

    position: relative;
}
.child {width: 300px; height: 100px; padding: 20px; position: absolute; top: 50%; left: 50%; margin: -70px 0 0 -170px; }2.不知宽高-水平垂直居中

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

3.flex布局（上面水居中和垂直居中有例子就不写了）

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

4.利用grid实现水平垂直居中，兼容性较差，不推荐。

.parent {height: 140px;display: grid; } .child { margin: auto; }5.弹窗的水平居中（截图不好放，就不放了，大家粘贴就可以运行）

<div>水平垂直居中了，好开心哦</div>

</div>

<style>

.element{

width: 300px;

height: 300px;

background-color: deeppink;

position: absolute;

　　left: 0;

　　right: 0;

　　top: 0;

　　bottom: 0;

　　margin: auto;

}

</style>

大家有好的方法就留言哈

转载于:https://www.cnblogs.com/qianduanting/p/8663663.html

水平，垂直居中的15种方法相关推荐

html flex上下居中,css3 flex实现div内容水平垂直居中的几种方法
一.flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row-reverse (与row 相 ...
CSS图片水平垂直居中的三种方法
CSS图片水平垂直居中的三种方法设置行高使用定位和translate 使用弹性盒子设置行高我们知道img元素为行内快元素,所以首先设置图片元素的父元素里文字水平居中,行高与整体高度一致. 其次 ...
div水平垂直居中的七种方法
学习笔记(一) div水平垂直居中的七种方法文章目录学习笔记(一) 前言一.绝对定位法 1.方法一 2.方法二 3.方法三 4.方法四二.flex布局法 1.方法五三.将小div转成行内块 ...
前端：水平垂直居中的10种方法
第一种: 通过绝对定位的方式 absolute + 负margin 首先知道子元素的宽高,给子元素设置top:50%:left:50%, 但绝对定位是基于子元素的左上角,我们所希望的效果是子元素的 ...
CSS实现水平垂直居中的五种方法
前言今天来看看一个之前困扰我很久的问题,在CSS中,水平垂直居中,能有几种写法. 方法一:margin:auto 子绝父相,当元素绝对定位的时候,会根据最近父元素进行定位,利用这个特性,我们有了这种 ...
php垂直居中代码_图文详解图片水平垂直居中的五种方法（附代码）
在页面布局时经常需要对图片的位置进行处理,这篇文章围绕图片居中展开,主要讲了如何用CSS实现图片的水平居中,图片垂直居中,还有图片的水平垂直居中,课程比较实用,感兴趣的小伙伴,可以参考一下,希望对你有 ...
图片水平垂直居中的几种方法总结
1.固定图片大小水平垂直居中,图片300*200 如下: html代码 <div class="con"><img src="images/fengch ...
html语言div图片垂直居中,图文详解图片水平垂直居中的五种方法
1.text-align:center实现图片水平居中 text-align一般用于文本的水平居中,也可以用于图片,代码如下: CSS部分: div{ text-align:center; width ...
CSS水平垂直居中的几种方法
我们都知道,固定宽高的 div 在网页中水平垂直居中很简单,相信大家也很容易的写出来,但是不固定宽高的 div 如何水平垂直居中呢?我们在网页布局,特别是手机等 web 端网页经常是不固定宽高的 di ...

水平，垂直居中的15种方法

水平，垂直居中的15种方法相关推荐

最新文章

热门文章