今天向一位朋友请教垂直水平居中问题，没想到朋友直接给出了三种实现方式，这里记录下来。

如图所示，登陆页中有一个登陆表单，我们需要将表单内容垂直水平居中。

这里，为了简单起见，以如下的html为例：

<div class='a1'><div class="a2">需要垂直水平居中的元素</div>
</div>

样式初始化

*{margin:0;padding:0;
}
html,  body{height: 100%;
}

最终我们想要实现的效果如下：

1. transform平移

这种方法利用css中的transform函数实现，好处在于通过百分比定位，具有很好的兼容性。

.a1{width: 400px;height:400px;background-color:red;position: relative; /* 父容器使用相对定位 */
}.a2{width:100px;height: 200px;background-color: orange;position: absolute; /* 待垂直水平居中的子容器使用绝对定位 */top:50%;         /* 子容器顶部距离父容器50%的高度 */left:50%;             /* 子容器左边距离父容器50%的宽度 */transform: translate(-50%,-50%);  /* 子容器分别向上和向左移动其高度和宽度的一半的距离 */
}

2. calc动态计算子容器位置

这种方法利用css中的calc函数实现，该方式需要子容器的宽度和高度固定。

.a1{width: 400px;height:400px;background-color:red;position: relative;  /* 父容器使用相对定位 */
}.a2{width:100px;height: 200px;background-color: orange;position: absolute;     /* 待垂直水平居中的子容器使用绝对定位 */top:calc(50% - 100px);   /* 利用calc函数计算子容器应当距离父容器顶部的距离（注意，这里“-”左边和右边需要有空格隔开） */left:calc(50% - 50px);    /* 利用calc函数计算子容器应当距离父容器左边的距离（注意，这里“-”左边和右边需要有空格隔开） */
}

3. flex布局

flex布局就是常说的弹性盒模型。利用html5中的flex布局也能实现垂直水平居中的效果。

#a1{width: 200px;height: 200px;background-color: red;display: flex;              /* 父容器使用flex布局 */justify-content: center;   /* 设置子容器水平居中 */align-items: center;     /* 设置子容器垂直水平 */
}#a2{width: 50px;height: 50px;background-color: aqua;
}

垂直水平居中的三种实现方式相关推荐

HTML 水平居中垂直居中垂直水平居中的几种实现方式
文章目录水平居中垂直居中垂直水平居中方式1:绝对定位方式二定位+负margin 方式3:使用translate实现平移方式4:通过设置bottom top left right marg ...
垂直水平居中的几种实现方式
一.固定宽高: 1.margin 根据已知的宽高写死,不推荐 2.定位 + margin-top + margin-left .box-container{position: relative;wid ...
关于css垂直水平居中的几种方式
关于css垂直水平居中的几种方式 css中元素的垂直水平居中是比较常见及较常使用的,在这里向大家介绍一下几种方式. 1.水平居中 margin: 0 auto; 效果图: 而文字的垂直水平居中也比较简 ...
H5+CSS3 实现div垂直水平居中的几种方式
实现div垂直水平居中的11种方法 <div class="father"><div class="son"></div> ...
使一个div垂直+水平居中的几种方法
前几天去一家互联网公司面试,面试官问到了这个应该算是比较简单的问题,在我自认为回答正确时,才知道这道题的答案有很多种,下面就让我们一起来探讨一下这个问题: 思路1:绝对定位居中(原始版) 这个是我回答 ...
C# 三种打印方式含代码
一:C#代码直接打印pdf文件(打印质保书pdf文件) 引用: 代码注释很详细了. private void btn_pdf_Click(object sender, RoutedEventArgs ...
css样式三种引入方式选择器常用属性：背景属性字体属性边框属性内间距外间距盒子模型
一.CSS简介 1.什么是css 重叠样式表主要是负责标签的样式美化页面一个网页分三大部分结构层: 主要由html负责负责页面的结构表现层: 主要由css负责页面的展示样式美化页面行 ...
计算机网络01：因特网概述、三种交换方式、计算机网络定义和分类、计算机网络的性能指标、计算机网络体系结构
学习链接: 湖科大教书匠因特网概述网络:由若干节点和连接这些节点的链路组成互连(联)网:多个网络通过路由器互连起来,构成一个覆盖范围更大的网络,即互连(联)网:因此互联网是"网络的网络 ...
Hive metastore三种配置方式
Hive的meta数据支持以下三种存储方式,其中两种属于本地存储,一种为远端存储.远端存储比较适合生产环境.Hive官方wiki详细介绍了这三种方式,链接为:Hive Metastore. 一.本地d ...

垂直水平居中的三种实现方式

1. transform平移

2. calc动态计算子容器位置

3. flex布局

垂直水平居中的三种实现方式相关推荐

最新文章

热门文章