一、使用grid布局

<!DOCTYPE html>
<html lang="en"><head><title>test</title><style>#outside {width: 200px;height: 200px;background: #000;display: grid;place-items: center;/* place-items等于justify-items:center; +  align-items:center;*/}#inside {width: 50px;height: 50px;background: #96f2d7;}</style></head><body><div id="outside"><div id="inside"></div></div></body>
</html>

二、使用flex布局

<!DOCTYPE html>
<html lang="en"><head><title>test</title><style>#outside {width: 400px;height: 400px;background: #000;display: flex;justify-content: center;align-items: center;}#inside {width: 100px;height: 100px;background: #ffc9c9;}</style></head><body><div id="outside"><div id="inside"></div></div></body>
</html>

三、使用定位+外边距

<!DOCTYPE html>
<html lang="en"><head><title>test</title><style>#outside {width: 300px;height: 300px;background: #000;position: relative;}#inside {width: 100px;height: 100px;background: #eebefa;position: absolute;top: 0px;right: 0px;bottom: 0px;left: 0px;margin: auto;}</style></head><body><div id="outside"><div id="inside"></div></div></body>
</html>

四、使用定位+平移

<!DOCTYPE html>
<html lang="en"><head><title>test</title><style>#outside {width: 200px;height: 200px;background: #000;position: relative;}#inside {width: 50px;height: 50px;background: #a5d8ff;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}</style></head><body><div id="outside"><div id="inside"></div></div></body>
</html>

五、使用外边距 + 平移

<!DOCTYPE html>
<html lang="en"><head><title>test</title><style>#outside {width: 200px;height: 200px;background: #000;overflow: hidden;/* overflow: hidden;是为了防止父子元素的margin-top重合 */}#inside {width: 50px;height: 50px;background: #ffffb8;margin: 50% auto;transform: translateY(-50%);}</style></head><body><div id="outside"><div id="inside"></div></div></body>
</html>

六、使用文本对齐 + 行高

<!DOCTYPE html>
<html lang="en"><head><title>test</title><style>#outside {width: 200px;height: 200px;background: #000;text-align: center;line-height: 200px;vertical-align: middle;}#inside {color: #e9ecef;display: inline;}</style></head><body><div id="outside"><div id="inside">只适用于行内元素</div></div></body>
</html>

七、使用表格单元

<!DOCTYPE html>
<html lang="en"><head><title>test</title><style>#outside {width: 200px;height: 200px;background: #000;display: table-cell;text-align: center;vertical-align: middle;}#inside {color: #ffdeeb;}</style></head><body><div id="outside"><div id="inside">只适用于行内元素</div></div></body>
</html>

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

CSS实现水平垂直居中的几种方式
1.最简单 margin: 0 auto line-height等于height .outer {width: 200px;padding: 200px;background-color: pink; ...
CSS实现水平垂直居中的6种方式
大家好,我是小梅,公众号:「小梅的前端之路」原创作者. 作为在前端领域不断探索的一员,在此记录开发中遇到的问题,如果你也遇到了相同的问题,希望本文对你有帮助. 在开发中经常需要实现的一个页面效果是: ...
css设置子盒子水平垂直居中（四种方式）
css设置子盒子水平垂直居中(四种方式) 1. 使用绝对定位 <!DOCTYPE html> <html><head><meta charset=" ...
CSS水平垂直居中的五种方式
CSS水平垂直居中的几种方式 absolute and -margin 需要设置盒子的宽度和高度 .father{border:1px solid red;width: 80vh;height: 90 ...
div水平垂直居中的七种方法
学习笔记(一) div水平垂直居中的七种方法文章目录学习笔记(一) 前言一.绝对定位法 1.方法一 2.方法二 3.方法三 4.方法四二.flex布局法 1.方法五三.将小div转成行内块 ...
CSS图片水平垂直居中的三种方法
CSS图片水平垂直居中的三种方法设置行高使用定位和translate 使用弹性盒子设置行高我们知道img元素为行内快元素,所以首先设置图片元素的父元素里文字水平居中,行高与整体高度一致. 其次 ...
水平垂直居中的几种方式
文章目录水平垂直居中一.实现水平垂直居中的方式二.具体实现元素定宽高利用定位 + calc 利用定位 + margin:负值元素不定宽高利用定位 + margin:auto 利用定位 + ...
HTML水平垂直居中的四种方式
第一种方式是使用margin进行移动水平居中 margin:0 auto; <!DOCTYPE html> <html lang="en"> <he ...
CSS实现水平垂直居中的五种方法
前言今天来看看一个之前困扰我很久的问题,在CSS中,水平垂直居中,能有几种写法. 方法一:margin:auto 子绝父相,当元素绝对定位的时候,会根据最近父元素进行定位,利用这个特性,我们有了这种 ...

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

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

一、使用grid布局

二、使用flex布局

三、使用定位+外边距

四、使用定位+平移

五、使用外边距 + 平移

六、使用文本对齐 + 行高

七、使用表格单元

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

最新文章

热门文章