实现绝对定位元素的水平居中
实现绝对定位元素的水平居中
方法
margin:auto实现
关键点
1、上下左右定位均置为0
2、margin:auto
实例
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>text2</title>
<style>
body,html{ margin:0;}
.container{ width:500px;
height:250px;
position:absolute;
left: 0; right: 0; top: 0;bottom: 0;
margin:auto;
background-color: #ccc;}
.box{
width:50px;
height:50px;
background-color: yellow;
border-radius: 0 0 50px 0;}
.box1{
width:50px;
height:50px;
background-color: yellow;
border-radius: 50px 0 0 0;
position:relative;
top:150px;
float:right;}
</style>
</head>
<body>
<div class='container'>
<div class='box'></div>
<div class='box1'></div>
</div>
</body>
</html>补充
border-radius可以改变边框边界为圆形
转载：https://blog.csdn.net/qq_45473786/article/details/101634174
查看评论