实现元素水平垂直居中的4种方法

引

元素的垂直水平居中在网页开发中极为常见，其实现方法也多种多样，接下来将介绍4种实现元素垂直水平居中的方法。实现效果如图：

<body><div class="father"><div class="son"></div></div>
</body>

一、使用弹性盒模型flex实现

设置父元素的布局方式为flex， display: flex;
设置父元素在水平方向上的对齐方式为居中对齐，justify-content: center;
设置父元素在垂直方向上的对齐方式为居中对齐， align-items: center;

 <style>//标签默认会有内外边距，为了防止影响效果，一般先清除所有元素的默认边距* {padding: 0;margin: 0;box-sizing: border-box;}.father {display: flex;width: 400px;height: 400px;justify-content: center;align-items: center;background-color: skyblue;margin: 200px auto;}.son {width: 200px;height: 200px;background-color: wheat;}</style>

二、使用定位position

设置父元素相对定位， position: relative;
设置子元素绝对定位，position: absolute; top：50%； left：50%；
利用外边距将子元素向上和向左分别移动其自身宽度和高度的一半 margin-left: -100px; margin-top: -100px;

 <style>* {padding: 0;margin: 0;box-sizing: border-box;}.father {position: relative;width: 400px;height: 400px;background-color: skyblue;margin: 100px auto;}.son {position: absolute;top: 50%;left: 50%;width: 200px;height: 200px;margin-left: -100px;margin-top: -100px;background-color: wheat;}  </style>

三、使用position+transform

使用第二种方法会发现存在一个问题，就是必须在知道子元素的宽和高的情况下，才能计算出其margin-left和margin-top的值，且当子元素的宽和高发生改变时，margin-left和margin-top的值也需要重新计算，这种方法显然不太理想。接下来将使用position结合CSS3提供的transform属性中的translate进行完善。

 <style>* {padding: 0;margin: 0;box-sizing: border-box;}.father {position: relative;width: 400px;height: 400px;background-color: skyblue;margin: 100px auto;}.son {position: absolute;top: 50%;left: 50%;width: 200px;height: 200px;transform: translate(-50%,-50%);background-color: wheat;}  </style>

其中 **transform: translate(-50%,-50%)**表示子元素向左、向上分别移动其自身宽度和高度的一半。这样无论元素自身宽高变成多少，都能保持移动的距离为其宽高的一半。

四、使用position + margin：auto

设置父元素相对定位
设置子元素绝对定位
设置子元素的left、top、right、bottom均为0
设置子元素的外边距为auto margin: auto;

<style>* {padding: 0;margin: 0;box-sizing: border-box;}.father {position: relative;width: 400px;height: 400px;background-color: skyblue;margin: 100px auto;}.son {position: absolute;top: 0;left: 0;right: 0;bottom: 0;width: 200px;height: 200px;background-color: wheat;margin: auto;}  </style>

五、总结

使用以上4中方式实现元素垂直水平居中时，使用flex方式主要是给其父元素设置样式。其他三种的重点则在于给元素本身设置样式。

实现元素水平垂直居中的4种方法相关推荐

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转成行内块 ...
CSS水平垂直居中的几种方法
我们都知道,固定宽高的 div 在网页中水平垂直居中很简单,相信大家也很容易的写出来,但是不固定宽高的 div 如何水平垂直居中呢?我们在网页布局,特别是手机等 web 端网页经常是不固定宽高的 di ...
元素水平垂直居中的几种常用方法
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>元素水 ...
CSS常用水平垂直居中的几种方法
CSS水平垂直居中一.利用margin:auto 二.利用position: absolute 三.弹性盒子四.利用水平对齐和行高五.grid 为方便理解,欢迎查看线上效果,在线试一试一.利用 ...
前端：水平垂直居中的10种方法
第一种: 通过绝对定位的方式 absolute + 负margin 首先知道子元素的宽高,给子元素设置top:50%:left:50%, 但绝对定位是基于子元素的左上角,我们所希望的效果是子元素的 ...
CSS实现水平垂直居中的五种方法
前言今天来看看一个之前困扰我很久的问题,在CSS中,水平垂直居中,能有几种写法. 方法一:margin:auto 子绝父相,当元素绝对定位的时候,会根据最近父元素进行定位,利用这个特性,我们有了这种 ...
CSS中让元素水平垂直居中的6种写法
水平垂直居中水平居中水平垂直居中--flex布局 margin + position:absolute布局 transform + absolute absolute + margin负值 abs ...
图片水平垂直居中的几种方法总结
1.固定图片大小水平垂直居中,图片300*200 如下: html代码 <div class="con"><img src="images/fengch ...

实现元素水平垂直居中的4种方法

引

一、使用弹性盒模型flex实现

二、使用定位position

三、使用position+transform

四、使用position + margin：auto

五、总结

实现元素水平垂直居中的4种方法相关推荐

最新文章

热门文章

实现元素水平垂直居中的4种方法

引

一、 使用弹性盒模型flex实现

二、 使用定位position

三、 使用position+transform

四、 使用position + margin：auto

五、总结

实现元素水平垂直居中的4种方法相关推荐

最新文章

热门文章

一、使用弹性盒模型flex实现

二、使用定位position

三、使用position+transform

四、使用position + margin：auto