文章目录

水平垂直居中
- 一、实现水平垂直居中的方式
- 二、具体实现
- - 元素定宽高
  - - 利用定位 + calc
    - 利用定位 + margin:负值
  - 元素不定宽高
  - - 利用定位 + margin:auto
    - 利用定位 + transform
    - flex 布局
    - grid 布局
    - table 布局
- 另：行内元素水平垂直居中
- 参考资料

水平垂直居中

一、实现水平垂直居中的方式

元素定宽高（知道元素宽高）

利用定位 + calc
利用定位 + margin:负值

元素不定宽高（不知道元素宽高）

利用定位 + margin:auto
利用定位 + transform
flex 布局
grid 布局
table 布局

二、具体实现

元素定宽高

利用定位 + calc

<style>.outer {position: relative;width: 200px;height: 200px;background-color: red;}.inner {position: absolute;top: calc(50% - 50px);left: calc(50% - 50px);width: 100px;height: 100px;background-color: yellow;}
</style>
<div class="outer"><div class="inner"></div>
</div>

利用定位 + margin:负值

<style>.outer {position: relative;width: 200px;height: 200px;background-color: red;}.inner {position: absolute;top: 50%;left: 50%;margin-left: -50px;margin-top: -50px;width: 100px;height: 100px;background-color: yellow;}
</style>
<div class="outer"><div class="inner"></div>
</div>

元素不定宽高

利用定位 + margin:auto

<style>.outer {position: relative;width: 200px;height: 200px;background-color: red;}.inner {position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;width: 100px;height: 100px;background-color: yellow;}
</style>
<div class="outer"><div class="inner"></div>
</div>

利用定位 + transform

<style>.outer {position: relative;width: 200px;height: 200px;background-color: red;}.inner {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100px;height: 100px;background-color: yellow;}
</style>
<div class="outer"><div class="inner"></div>
</div>

缺点：兼容性不佳

flex 布局

<style>.outer {display: flex;justify-content: center;align-items: center;width: 200px;height: 200px;background-color: red;}.inner {width: 100px;height: 100px;background-color: yellow;}
</style>
<div class="outer"><div class="inner"></div>
</div>

缺点：兼容性不佳

grid 布局

<style>.outer {display: grid;justify-content: center;align-items: center;width: 200px;height: 200px;background-color: red;}.inner {width: 100px;height: 100px;background-color: yellow;}
</style>
<div class="outer"><div class="inner"></div>
</div>

缺点：兼容性不佳

table 布局

<style>.outer {display: table-cell;text-align: center;vertical-align: middle;width: 200px;height: 200px;background-color: red;}.inner {display: inline-block;width: 100px;height: 100px;background-color: yellow;}
</style>
<div class="outer"><div class="inner"></div>
</div>

另：行内元素水平垂直居中

水平居中

在行内元素的父元素设置：text-align: center;
flex布局：在行内元素的父元素设置：display: flex;justify-content: center;

垂直居中

单行文本
- 把 line-height 设置为父元素的高度
- flex布局：在行内元素的父元素设置：display: flex;align-items: center;
多行文本
- 在父元素设置： disaply: table-cell; vertical-align: middle; （多行文本垂直居中也适合单行文本的垂直居中）

参考资料

面试官：你能实现多少种水平垂直居中的布局（定宽高和不定宽高）
面试官：元素水平垂直居中的方法有哪些？如果元素不定宽高呢？

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

css设置子盒子水平垂直居中（四种方式）
css设置子盒子水平垂直居中(四种方式) 1. 使用绝对定位 <!DOCTYPE html> <html><head><meta charset=" ...
CSS水平垂直居中的五种方式
CSS水平垂直居中的几种方式 absolute and -margin 需要设置盒子的宽度和高度 .father{border:1px solid red;width: 80vh;height: 90 ...
css实现水平垂直居中的七种方式
css实现水平垂直居中的七种方式一.使用grid布局二.使用flex布局三.使用定位+外边距四.使用定位+平移五.使用外边距 + 平移六.使用文本对齐 + 行高七.使用表格单元一.使用 ...
HTML水平垂直居中的四种方式
第一种方式是使用margin进行移动水平居中 margin:0 auto; <!DOCTYPE html> <html lang="en"> <he ...
CSS实现水平垂直居中的几种方式
1.最简单 margin: 0 auto line-height等于height .outer {width: 200px;padding: 200px;background-color: pink; ...
div盒子水平垂直居中的几种方式
1. div水平居中 div{width:100px;height:100px;margin:0 auto; } 2. div水平垂直居中这里要有两层或者给body设置高度100vh,然后给元素设置 ...
【前端】水平垂直居中的几种方式
1. flex 布局 flex布局也叫弹性布局,我认为flex box布局是一种十分优雅的布局方式,兼容性一般,使用起来非常简单. display: flex;// flex-direction默认是 ...
CSS实现水平垂直居中的6种方式
大家好,我是小梅,公众号:「小梅的前端之路」原创作者. 作为在前端领域不断探索的一员,在此记录开发中遇到的问题,如果你也遇到了相同的问题,希望本文对你有帮助. 在开发中经常需要实现的一个页面效果是: ...
html 水平垂直居中,css水平垂直居中有几种实现方式？
项目中经常碰到需要实现水平垂直居中的样式.下面就总结几种常用的方法 css水平垂直居中有几种实现方式? 1.水平对齐+行高 [思路一]text-align + line-height实现单行文本水平垂 ...

水平垂直居中的几种方式

文章目录

水平垂直居中

一、实现水平垂直居中的方式

二、具体实现

元素定宽高

利用定位 + calc

利用定位 + margin:负值

元素不定宽高

利用定位 + margin:auto

利用定位 + transform

flex 布局

grid 布局

table 布局

另：行内元素水平垂直居中

参考资料

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

最新文章

热门文章