容器确定宽高:知识点:transform只能设置在display为block的元素上。
<head>
<meta charset="utf-8">
<title>title</title>
<style type="text/css">
#container{
width: 500px; /* 确定!*/
height: 300px;
background-color: pink;
}
#child{
width: 100px; /* 如果没有宽度,div充满容器,怎么水平居中 */
position: relative; /* 相对父容器进行定位,规定top left值 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 如果不设置这个,其实是子div的左上原点是水平垂直居中,这个translate百分比是自身的百分比*/
text-align: center; /* 里面的文字居中 */
}
</style>
</head>
<body>
<div id="container">
<div id="child">哈哈哈哈</div>
</div>
</body>
利用 flex 布局 实际使用时应考虑兼容性,flex不兼容ie9
父容器高度没有设置,那么其高度就是子容器撑开的,也就没有垂直居中这一说,只需要水平居中即可。
.container { display: flex; align-items: center; /* 垂直居中 */ justify-content: center; /* 水平居中 */ } .container div { width: 100px; height: 100px; background-color: pink; /* 方便看效果 */ }
如对本文有疑问, 点击进行留言回复!!
清除新版Google Chrome浏览器中表单控件(input,button...)默认的黑色边框
荐 20200714——git/mac配置/项目运行步骤/一些报错
antd 菜单组件 使用时报错:Cannot read property ‘isRootMenu‘ of undefined
CSS|div的style=“background-image: url(img/a.bmp)图片显示不出来
硬件仪表盘账号建立指导(一) --WHQL认证测试结果提交账号(一)
cookie的规范Cookie的不可跨域名性或Cookie与域名的关系
网友评论