csss实现水平垂直居中的方法大全

文章目录

1. 水平居中
2. 垂直居中

1. 水平居中

1.1 行内元素

(1) text-align：center

1.2 块级元素

确定宽度
(1) margin:0 auto;
(2) 子绝父相 + margin-left：-自己width/2
未知宽度
(4) display:inline-block; text-align:center
(5) 子绝父相 + translateX(-50%)
(6) display:table；margin:0 auto;
(7) display:flex; justify-content:center

2. 垂直居中

vertical-align:middle（内联元素/display:table-cell）
line-height（适合纯文本）
子绝父相 + left:0;right:0 + margin:auto;（设置宽）
子绝父相 + top + translateY
display:flex; margin:auto;

重点：
W3C规定，top，bottom设置为auto，其实默认值为0。margin:auto; == margin:0 auto;只是水平居中
W3C规定，只有绝对定位的元素才可以使用top，bottom为auto的自动分配从而实现上下左右都自动分配margin。但是前提要设置top,bottom,left,right为0，使得元素找到边界，margin也可以找到边界去auto分配外边距，从而实现水平垂直居中。

参考文章：
1.margin:auto不能实现垂直居中
2.margin: 0 auto 水平居中原理

csss实现水平垂直居中的方法大全相关推荐

html脚本语言居中,web前端：CSS--几种常用的水平垂直居中对齐方法
层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现html(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.css不仅可以静态地修 ...
[css] 写出div在不固定高度的情况下水平垂直居中的方法？
[css] 写出div在不固定高度的情况下水平垂直居中的方法? 我知道的有两种方法<!DOCTYPE html> <html><head><meta char ...
[css] 写出在不固定宽高的元素在固定高度的情况下水平垂直居中的方法
[css] 写出在不固定宽高的元素在固定高度的情况下水平垂直居中的方法 flex布局:还有就是可以用定位也可以实现等等: flex:父div:{display:flex: justify-conten ...
CSS实现水平垂直居中的方法总结
在CSS-trick 上面有一篇很棒的博文介绍CSS中的水平垂直居中戳这里. 在这里我强烈推荐这篇文章的原因是:整篇文章的逻辑结构非常清晰.我之前也看过不少CSS实现垂直居中相关的博客,很多博客的总 ...
css实现文字或者div盒子水平垂直居中的方法
实现水平垂直居中的方法文本(文字)内容属于行内元素行内元素水平垂直居中方法方式一: 设置文字外层的盒子 text-align:center /*水平居中*/ height = 100px; /* ...
【面试题】CSS 中几种最常用的水平垂直居中的方法
目录 CSS 中几种最常用的水平垂直居中的方法一.使用 margin:auto 二.使用 position:absolute 三.使用弹性布局四.文本水平对齐和行高五.使用网格布局 CSS 中几 ...
文字居中、CSS中实现盒子水平垂直居中的方法
1. 文字居中: 第一种方式: 当用text-align:center时,达到的是水平居中的效果,那再用vertical-align:middle:其实是实现不了垂直居中的,此时就需要用到displa ...
html 5 设置标签居中,Html5中新增标签与样式实现元素水平垂直居中的方法
Html5中新增标签与样式实现元素水平垂直居中的方法发布时间:2021-06-12 12:44:51 来源:亿速云阅读:71 作者:小新这篇文章将为大家详细讲解有关Html5中新增标签与样式实现 ...
h5文字垂直居中_CSS中垂直居中和水平垂直居中的方法
flex垂直居中: 第一种:使用flex布局,让居中元素的父元素为flex属性,让它在交叉轴上center就可以达到居中效果了: html代码: <div class="father& ...

csss实现水平垂直居中的方法大全

文章目录

1. 水平居中

2. 垂直居中

csss实现水平垂直居中的方法大全相关推荐

最新文章

热门文章