前端布局之——水平垂直居中

其他 2020-03-08 23:34:33 阅读次数: 0

前端垂直居中布局

其他平台文章地址

前端页面的居中是平常开发中比较常见的布局，以下将从水平居中、垂直居中、水平垂直居中三个角度分析不同的布局方法。

水平居中

法一：行内元素水平居中

html:
<div class="container">
  <div class="box"></div>
</div>

css:
.container {
  text-align: center;
  width: 100%;
  height: 400px;
  background: #ccc;
}

.container .box {
  width: 100px;
  height: 100px;
  background: yellow;
  display: inline-block;
}

示意图：

在这里插入图片描述

法二：margin实现水平居中

html:
<div class="container">
  <div class="box"></div>
</div>

css:
.container {
  width: 100%;
  height: 400px;
  background: #ccc;
}

.container .box {
  width: 100px;
  height: 100px;
  background: yellow;
  margin: 0 auto;
}

示意图：

在这里插入图片描述

法三：flex弹性布局（可实现多个块级元素水平居中）

html:
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

css:
.container {
  width: 100%;
  height: 400px;
  background: #ccc;
  display: flex;
  justify-content: center;
}

.container .box {
  width: 100px;
  height: 100px;
  background: yellow;
  margin-left: 10px;
}

.container .box:first-child {
  margin-left: 0;
}

示意图：

在这里插入图片描述

注意：flex布局会将margin包含在内，并且上面的场景通过text-align: center;同样可以做到，也就是方法一。

垂直居中

法一：行内元素垂直居中

html:
<div class="container">
  <div class="box"></div>
</div>

css:
.container {
  width: 100%;
  height: 400px;
  line-height: 400px;
  background: #ccc;
}

.container .box {
  width: 100px;
  height: 100px;
  background: yellow;
  display: inline-block;
  vertical-align: middle;
}

演示图：

在这里插入图片描述

注：line-height只能在父元素中设置。

法二：通过padding实现垂直居中

html:
<div class="container">
  <div class="box">
    <div class="box2"></div>
  </div>
</div>

css:
.container {
  width: 100%;
  height: 400px;
  background: #ccc;
}

.container .box {
  width: 100px;
  height: 100px;
  padding: 150px 0;
}

.container .box .box2 {
  width: 100px;
  height: 100px;
  background: yellow;
}

演示图：

在这里插入图片描述

注：单单通过margin是不行的。

法三：vertical-align属性来实现垂直居中

html:
<div class="container">
  <div class="box">
    <div class="box2"></div>
  </div>
</div>

css:
.container {
  width: 100%;
  height: 400px;
  background: #ccc;
  display: table;
}

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

.container .box2 {
  width: 100px;
  height: 100px;
  background: yellow;
}

演示图：

在这里插入图片描述

法四：flex实现垂直居中

html:
<div class="container">
  <div class="box"></div>
</div>

css:
.container {
  width: 100%;
  height: 400px;
  background: #ccc;
  display: flex;
  align-items: center;
}

.container .box {
  width: 100px;
  height: 100px;
  background: yellow;
}

演示图：

在这里插入图片描述
法五：将一个全高度的伪元素放置在容器内，然后设置文本垂直对齐

html:
<div class="container">
  <div class="box"></div>
</div>

css:
.container {
  width: 100%;
  height: 400px;
  background: #ccc;
}

.container:before {
  content: '';
  display: inline-block;
  height: 100%;
  width: 0%;
  vertical-align: middle;
}

.container .box {
  width: 100px;
  height: 100px;
  background: yellow;
  display: inline-block;
  vertical-align: middle;
}

示意图：

在这里插入图片描述

法六：绝对定位实现垂直居中（元素高度已知）

html:
<div class="container">
  <div class="box"></div>
</div>

css:
.container {
  width: 100%;
  height: 400px;
  background: #ccc;
  position: relative;
}

.container .box {
  width: 100px;
  height: 100px;
  background: yellow;
  position: absolute;
  top: 50%;
  margin-top: -50px;
}

示意图：

在这里插入图片描述

法七：绝对定位搭配transform实现垂直居中（元素高度未知）

html:
<div class="container">
  <div class="box"></div>
</div>

css:
.container {
  width: 100%;
  height: 400px;
  background: #ccc;
  position: relative;
}

.container .box {
  width: 100px;
  height: 100px;
  background: yellow;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

演示图：

在这里插入图片描述

法八：flex通过flex-direction: column;实现垂直居中

<div class="container">
  <div class="box"></div>
</div>

css:
.container {
  width: 100%;
  height: 400px;
  background: #ccc;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.container .box {
  width: 100px;
  height: 100px;
  background: yellow;
}

演示图：

在这里插入图片描述

水平垂直居中

法一：行内元素text-align搭配line-height（父级元素高度已知，子元素宽高度可未知）

html:
<div class="container">
  <div class="box"></div>
</div>

css:
.container {
  width: 100%;
  height: 400px;
  line-height: 400px;
  background: #ccc;
  text-align: center;
}

.container .box {
  width: 100px;
  height: 100px;
  background: yellow;
  display: inline-block;
  vertical-align: middle;
}

演示图：

在这里插入图片描述

法二：绝对定位实现水平垂直居中（需要知道子元素的宽高）

html:
<div class="container">
  <div class="box"></div>
</div>

css:
.container {
   width: 100%;
   height: 400px;
   background: #ccc;
   position: relative;
 }

.container .box {
  width: 100px;
  height: 100px;
  background: yellow;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
}

演示图：

在这里插入图片描述

法三：绝对定位实现水平垂直居中（不需要知道子元素的宽高）

html:
<div class="container">
  <div class="box"></div>
</div>

css:
.container {
  width: 100%;
  height: 400px;
  background: #ccc;
  position: relative;
}

.container .box {
  width: 100px;
  height: 100px;
  background: yellow;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

演示图：

在这里插入图片描述

法四：通过父元素使用display: table子元素使用vertical-align: middle实现水平垂直居中

html:
<div class="container">
  <div class="box">
    <div class="box2"></div>
  </div>
</div>

css:
.container {
  width: 100%;
  height: 400px;
  background: #ccc;
  display: table;
}

.container .box {
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

.container .box2 {
  width: 100px;
  height: 100px;
  background: yellow;
  display: inline-block;
  vertical-align: middle;
}

演示图：

在这里插入图片描述

**法五：借助伪元素实现水平垂直居中（需要知道父元素的高度） **

html:
<div class="container">
  <div class="box">
    <div class="box2"></div>
  </div>
</div>

css:
.container {
  text-align: center;
  width: 100%;
  height: 400px;
  background: #ccc;
}

.container:before {
  content: '';
  display: inline-block;
  height: 100%;
  width: 0%;
  vertical-align: middle;
}

.container .box {
  width: 100px;
  height: 100px;
  background: yellow;
  display: inline-block;
  vertical-align: middle;
}

演示图：

在这里插入图片描述

法六：通过父元素使用display: table子元素使用vertical-align: middle实现水平垂直居中(水平居中采用margin)

html:
<div class="container">
  <div class="box">
    <div class="box2"></div>
  </div>
</div>

css:
.container {
  width: 100%;
  height: 400px;
  background: #ccc;
  display: table;
}

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

.container .box2 {
  width: 100px;
  height: 100px;
  background: yellow;
  margin: 0 auto;
}

演示图：

在这里插入图片描述

法七：table-cell嵌套两层用法

html:
<div class="container">
  <div class="box"></div>
</div>

css:
.container {
  width: 400px;
  height: 400px;
  background: #ccc;
  display: table-cell;
  vertical-align: middle;
}

.container .box {
  width: 100px;
  height: 100px;
  background: yellow;
  margin: 0 auto;
}

演示图：

在这里插入图片描述

注：这种方法其实和上面中的两种方法基本一样，只不过只嵌套两层不支持父级元素宽度或者高度为百分比的情况，同时不支持父级元素脱离文档流。

法八：绝对定位加四边定位为0，margin 为 auto（子元素高度未知时无效）

html:
<div class="container">
  <div class="box"></div>
</div>

css:
.container {
  width: 100%;
  height: 400px;
  background: #ccc;
  position: relative;
}

.container .box {
  width: 100px;
  height: 100px;
  background: yellow;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

演示图：

在这里插入图片描述

法九：flex布局实现水平垂直居中

html:
<div class="container">
  <div class="box"></div>
</div>

css:
.container {
  width: 100%;
  height: 400px;
  background: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container .box {
  width: 100px;
  height: 100px;
  background: yellow;
}

演示图：

在这里插入图片描述

法十：利用grid布局，划分成3x3栅格，第二行第二列格子垂直水平居中

html:
<div class="container">
  <div class="box"></div>
</div>

css:
.container {
  width: 300px;
  height: 300px;
  background: #ccc;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

.container .box {
  width: 100px;
  height: 100px;
  background: yellow;
  grid-row-start: 2;
  grid-column-start: 2;
}

演示图：

在这里插入图片描述

法十一：利用flex或grid布局结合 margin: auto;

html:
<div class="container">
  <div class="box"></div>
</div>

css:
.container {
  width: 100%px;
  height: 400px;
  background: #ccc;
  display: flex;
  /* display: grid; */
}

.container .box {
  width: 100px;
  height: 100px;
  background: yellow;
  margin: auto;
}

演示图：

在这里插入图片描述

YaoDeBiAn
发布了80 篇原创文章 · 获赞 91 · 访问量 15万+
私信 关注

猜你喜欢

转载自blog.csdn.net/YaoDeBiAn/article/details/100907015
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022