css 水平/竖直/水平竖直方法大全

最新推荐文章于 2022-07-27 09:10:14 发布

wen_binObject

最新推荐文章于 2022-07-27 09:10:14 发布

阅读量927

点赞数

分类专栏：个人记录 javascript 文章标签： css

本文链接：https://blog.csdn.net/wen_binobject/article/details/77260909

版权

javascript 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

个人记录

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*脱离文档流元素的居中*/
/*最基本的水平竖直居中 -100 -100 分别是宽高一半的负值*/
/* div{
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
}*/
/*最基本的水平竖直居中*/
/*
优点：

1.支持跨浏览器，包括IE8-IE10.

2.无需其他特殊标记，CSS代码量少

3.支持百分比%属性值和min-/max-属性

4.只用这一个类可实现任何内容块居中

5.不论是否设置padding都可居中（在不使用box-sizing属性的前提下）

6.内容块可以被重绘。

7.完美支持图片居中。

缺点：

1.必须声明高度（查看可变高度Variable Height）。

2.建议设置overflow:auto来防止内容越界溢出。（查看溢出Overflow）。

3.在Windows Phone设备上不起作用
绝对定位方法在最新版的Chrome,Firefox, Safari, Mobile Safari, IE8-10.上均测试通过。
详细http://blog.csdn.net/freshlover/article/details/11579669
div{
position: absolute;
width: @width; // 宽度值
height: @height; // 高度值
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}*/
/*未脱离文档流元素的居中*/
/*div{
width: 300px;
height: 300px;
border: 3px solid #555;
display: table-cell;
vertical-align: middle;
text-align: center;
}
img{
vertical-align: middle;
}*/

/*①css3实现水平竖直居中*/
/* div{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}*/
/*flex实现水平竖直居中*/
/* 1.设置container的display的类型为flex，激活为flexbox模式。
2.justify-content定义水平方向的元素位置
3.align-items定义垂直方向的元素位置
.container{
display: flex;
justify-content: center;
align-items: center;
}*/

/*水平居中*/
/*
1.最常用的方式，使用margin：0 auto;（即margin-left:auto;margin-right:auto）.前提是需要知道元素的width。也就是说元素要是display：block
2.使用display:inline-block;样式使元素转为内链元素，可以设置width属性（如果不设置即为内容大小宽度）。注意：需要给其父元素添加样式text-align:center。（意思就和文本居中雷同）
3. div{ position:absolute; left:50%; margin-left:-100px}
4.div{ position:absolute; left:50%; -webkit-transform:translate(-50%)}
*/
/*②flex单行水平居中*/
/* body{
display: flex;
justify-content: center;
}*/
/*③flex多行水平居中*/
/* body{
display: flex;
justify-content: center;
flex-wrap: wrap/wrap-reverse;
}*/

/*④css3竖直居中（VH为窗口高度单位，1vh等于viewport高的的1%）*/
/* div{
margin-top:calc( (100vh - 200px)/2);
}*/
/*⑤利用line-height（行高法）,只针对文字无例子需要的话自行看MDN 看介绍*/
/*总结一下从css2进化到css3的所有垂直居中方法
1.flex法，父元素添加 display: flex; 子元素添加 margin: auto;
2.利用calc() 数值计算
3.box法，子元素添加 display: (-webkit-/-moz-/-ms-)box; box-orient: horizontal; box-pack: center; box-align: center;
4.模拟表格，父元素添加 display: table; 子元素添加 display: table-cell; vertical-align: middle
5.利用padding或margin（边距法）
6.利用line-height和height相同（行高法）,只针对文字 ;
*/

</style>
</head>
<body>









</div>
</body>
</html>
<script>

</script>

wen_binObject

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 水平/竖直/水平竖直方法大全

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;&lt;/title&gt;&lt;style type="text/css"&gt; /*脱离文档流元素的居中*//*最基本的水平竖直居中 -100 -100 分别是宽高
复制链接

扫一扫