一、利用绝对定位居中

方法：利用 position: absolute; 相对于父级元素进行绝对定位，对 top 、left 、right 、bottom 等的值进行操控来实现。具体代码如下所示：

1、margin: auto; 方法

{width: 100px;height: 100px;border: 1px solid green;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;
}

2、改变 margin 值

<div class="body" ><div class="center" ></div>
</div>.body{width: 500px;height: 500px;border: 1px solid #000;position: relatuve;
}
.center{width: 100px;height: 100px;border: 1px solid green;position: absolute;top: 50%;left: 50%;margin-top: -50px;margin-left: -50px;
}

二、利用弹性盒子居中

方法：元素 display 定义为 flex 。利用 fiexd 容器和容器内项目 item 的关系属性进行垂直居中。具体代码如下：

1、容器直接让项目垂直居中

<div class="body" ><div class="content"></div>
</div>
.body{width: 500px;height: 500px;border: 1px solid red;display: flex;justify-content: center;align-items: center;
}
.content{width: 100px;height: 100px;border: 1px solid green;
}

2、容器先让项目水平居中，项目自身要求居中

<div class="body" ><div class="content" ></div>
</div>
.body{width: 500px;height: 500px;border: 1px solid red;display: flex;justify-content: center;
}
.content{width: 100px;height: 100px;border: 1px solid green;align-self: center;
}

三、利用行高对文本垂直居中

方法：设置文本 line-height 值和容器高度一致，然后 text-align: center; 具体代码如下：

<div class="inText" >我的猫猫叫粪球
</div>.inText{width: 500px;height: 300px;line-height: 300px;text-align: center;
}

CSS3垂直水平的居中的几种方法相关推荐

DIV水平方向居中的几种方法
一.使用margin: 1 #center0 { 2 background: red; 3 margin: 0 auto; 4 } 或者: 1 margin: auto; 这样的前提是父盒子里没有其他 ...
css3文字水平垂直居中对齐的几种方法
1.使用绝对定位: .div{position:absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);} 2.flex布局: .pa ...
css居中的几种办法,CSS div居中的几种方法
CSS实现div垂直居中的方法有很多,下面div居中的几种方法是自己平时写网页中经常用到的,最常见的例子就是登录注册弹出框. 方法一:对div使用绝对布局position:absolute;并设置to ...
CSS 实现居中的几种方法
**CSS 实现居中的几种方法** 一.前言二.常见的方法方法一:margin和width实现方法二:inline-block和父元素text-align 方法三:浮动实现水平居中方法四:绝对 ...
web前端-01：关于css居中的几种方法
web前端-01:关于css居中的几种方法在学习web前端的过程中,居中问题应该算得上是个比较经典的问题了吧,关于居中的方法也有很多,总结一下我自己比较喜欢用的几个方法. 1 利用 ...
让子盒子水平和垂直居中的五种方法
首先创建互相嵌套的两个盒子浏览器中打开,盒子的样式为: 接下来是让子盒子水平和垂直居中的五种方法: 方法一:利用文本水平居中text-align: center和行高line-height进行实现 ...
html div 居中心,CSS实现DIV居中的三种方法
下面给大家分享div居中的实现代码,具体代码如下所示: demo .div1{ width: 100px; height: 100px; border: 1px solid #000000;} .di ...
Markdown——图片、文字显示居中的一种方法
Markdown--图片.文字显示居中的一种方法一.方法 1.1 图片居中 1.2 文字居中二.图片居中举例 2.1 编辑界面 2.2 显示界面一.方法 1.1 图片居中在图片下面的链接的最后 ...
相对定位绝对定位固定定位粘性定位居中的三种方法 calc函数标签的使用方法
相对定位绝对定位固定定位粘性定位居中的三种方法 calc函数标签的使用方法一.相对定位:position:relative; 二.绝对定位:position:absolute; 1.找参照物 ...

CSS3垂直水平的居中的几种方法

一、利用绝对定位居中

二、利用弹性盒子居中

三、利用行高对文本垂直居中

CSS3垂直水平的居中的几种方法相关推荐

最新文章

热门文章