html hr 垂直居中,常见的CSS水平垂直居中设置

2024-05-13 02:11:51

让内容上下居中在布局时是经常写的，下面写了常见的4中上下居中方式，复制代码查看效果

css代码

*{

margin: 0;

padding: 0;

}

body{

padding:10px 50px;

}

.parent{

width: 400px;

height: 200px;

background: #b99eff;

}

.child{

width: 150px;

height: 100px;

background: #db6867;

}

/*flex水平居中和垂直居中*/

.flex-parent{

display: flex; /* 给父元素设值*/

justify-content: center; /* 水平居中 */

align-items: center; /*垂直居中*/

}

.flex-child{

}

/*table水平垂直居中*/

.table-parent{

display: table-cell;

text-align: center; /*水平居中*/

vertical-align: middle; /*垂直居中*/

}

.table-child{

display: inline-block;

}

/*absolute+transform 水平垂直居中*/

.transform-parent{

position: relative;

}

.transform-child{

position: absolute;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

}

/*绝对定位方式+四个方向置0*/

.position-parent{

position:relative

}

.position-child{

margin:auto;

height: 100px;

width: 100px;

position: absolute;

top: 0; left: 0; bottom: 0; right: 0;

}

html代码

flex水平居中和垂直居中

缺点：有兼容性问题

table水平垂直居中

absolute+transform 水平垂直居中

绝对定位方式+四个方向置0

以上四种上下居中方式,向父级元素里面添加元素时布局发生的改变会不一样,修改代码即可发现

版权声明:除特别注明外,本站所有文章均为田珊珊个人博客原创

html hr 垂直居中,常见的CSS水平垂直居中设置相关推荐

css居中怎么移动,移动端css水平垂直居中
水平垂直居中 1.margin 负值调整偏移实现兼容性: 当前流行的使用方法. .box{ width: 100%; height: 100%; } .content{ position: abso ...
html 水平垂直居中,css水平垂直居中有几种实现方式？
项目中经常碰到需要实现水平垂直居中的样式.下面就总结几种常用的方法 css水平垂直居中有几种实现方式? 1.水平对齐+行高 [思路一]text-align + line-height实现单行文本水平垂 ...
css 水平垂直居中实现方式
css 水平垂直居中实现方式 css中有好多实现居中的方式,在项目中经常不知道使用哪种方式会比较好,所以记录下来. 水平垂直居中包括行内元素居中,以及块级元素居中行内元素html结构 <div ...
CSS 水平垂直居中
方法一: 容器确定宽高:知识点:transform只能设置在display为block的元素上. <head> <meta charset="UTF-8"> ...
css水平垂直居中四种常用方式
css水平垂直居中第一种:flex布局水平垂直居中思路: 给父盒子display属性设置flex值,然后使用justify-content与align-item属性进行居中. 参考:阮一峰的fle ...
CSS水平垂直居中的五种方式
CSS水平垂直居中的几种方式 absolute and -margin 需要设置盒子的宽度和高度 .father{border:1px solid red;width: 80vh;height: 90 ...
css水平垂直居中对齐方式
css水平垂直居中总共有四种方法 ① 使用绝对定位注意:使用绝对定位居中需要固定宽高 position:absolute; top:0; left:0; bottom:0; right:0; wid ...
16种CSS水平垂直居中方法
16种css水平垂直居中方法以及应用(文字.图片) 一.垂直居中 1.行内元素基本思想:单行文本子元素line-height 值为父元素 height 值 .parent {height: 200p ...
css 水平垂直居中的几种常见方式
下面是几种常见的水平垂直居中方式,可在不同情形下方便采用不同的方式 html <body><div class="box"><div class=&q ...
CSS水平垂直居中常见方法总结(转）
文章目录一.简介二.元素水平居中三.元素水平垂直居中 3.1 position 元素已知宽度 3.2 position transform 元素未知宽度 3.3 flex布局 3.4 table ...

最新文章

热门文章