发表于： 2018-09-24 22:58:25
1 722
今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）
今天完成了关于任务六的再次修改
明天计划的事情：（一定要写非常细致的内容）
明天计划开始任务七
遇到的问题：（遇到什么困难，怎么解决的）
遇到了关于无法实现绝对定位的居中问题，除了使用外边距撑开以外
收获：（通过今天的学习，学到了什么知识）
然后我找了四个方法，都是关于垂直水平居中的办法
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 600px;
height: 400px;
position: absolute;
left: 50%; top: 50%;
border:1px solid #000;
background:red;
margin-top: -200px; /* 高度的一半 */
margin-left: -300px; /* 宽度的一半 */
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
这个是办法一
根据绝对定位，父元素的相对定位下的子元素
位置进行设置，然后使用外边距在宽高进行设置
来达到垂直水平居中的方法
优点：
1. 良好的跨浏览器特性，兼容IE6-IE7。
2. 代码量少。
缺点：
1. 不能自适应。不支持百分比尺寸和min-/max-属性设置。
2. 内容可能溢出容器。
3. 边距大小与padding,和是否定义box-sizing: border-box有关，计算需要根据不同情况。
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 600px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
border:1px solid #000;
background:red;
transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
这个是第二个方法
根据绝对定位，父元素的相对定位下的子元素
位置进行设置，然后使用转换属性，来使用它自身的高度进行调试
来达到垂直水平居中的方法
优点：
1. 内容可变高度
2. 代码量少
缺点：
1. IE8不支持
2. 属性需要写浏览器厂商前缀
3. 可能干扰其他transform效果
4. 某些情形下会出现文本或元素边界渲染模糊的现象
还有第三个办法
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 600px;
height: 400px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border:1px solid #000;
background:red;
margin: auto; /* 有了这个就自动居中了 */
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
这个第三个办法，是直接使用外边距自动来完成
优点：
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.
绝对定位方法在最新版的Chrome,Firefox, Safari, Mobile Safari, IE8-10.上均测试通过
还有第四个就是根据使用flex的办法来进行设置
在父元素上面设置好flex
display:-webkit-flex;
align-items:center;//子元素垂直居中
justify-content:center;//子元素水平居中
这样的话也可以达到一个居中的方法，
返回列表
评论