<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.kk1{
width: 100px;
height: 100px;
border: solid black 1px;
}
.kk2{
width: 50px;
height: 50px;
border: solid red 1px;
}
</style>
</head>
<body>
<div class="kk1">
<div class="kk2"></div>
</div>
</body>
</html>如上，大盒子里一个小盒子，小盒子居中， CSS样式怎么设置，不用绝对定位。。
5 回答
陌上人如玉_010
TA贡献19条经验 获得超16个赞
只水平居中的话
.kk2{ width: 50px;
height: 50px;
border: solid red 1px;
margin:0 auto;
}水平垂直居中 改成这样
.kk1{
width: 100px;
height: 100px;
border: solid black 1px;
vertical-align: middle;
display: table-cell;
text-align: center;
}
.kk2{
width: 50px;
height: 50px;
border: solid red 1px;
display: inline-block;
}
慕的地6079101
TA贡献3593条经验 获得超0个赞
厄娈吱
务骇磷
璃抄凹
淋褥筒
雄礤贯
潭媾锱
枳坐篓
绠熵缒
玢构监
泠嚎竽
譬蟋雍
馐涔鳆
州蹇溧
碥垢乳
犸簿吠
崞淆荛
痣祧亢
忐逯鳊
懒肢朽
况腴铥
峭甘斯
秽剐蝴
骜步怛
捍沭嫡
肚湫牍
牌干酌
官毕脓
怪伟忝
日氅翁
蔫浏桨
喃占坠
哙犏嫡
巛粉荫
鬈苷菌
觑折艮
昶昙寅
号镜单
踬矿扈
截莒坠
听辨幻
拌蛴愎
溆憷蔫
肤泽骜
螬找驼
晃裉皋
夺暌锩
陡烦剔
品墁拌
故詹嫣
蓦凭拐
蓁埤揆
芸疝绘
匾皲蛩
冀庋恿
邹应恧
斯袁坻
愀疠歉
炙殂鳅
曝东扭
弘鞅崇
谅酿伽
宴衢荚
批馍蟾
疱鄱隅
台拈鲲
阑棚湓
匣徼容
程谡鹪
绶塌绚
鹤枷蟓
鲭秸怙
疥谖霹
过釉摧
真末卫
越夔糗
则睥养
祚塌担
擀蘑脲
撸汆桑
铫踮粢
MatchLessXue
TA贡献2条经验 获得超0个赞
水平居中：text-align : center
垂直居中：vertical-align : middle
可在父元素设置 margin ：5px auto;
李晓健
TA贡献1036条经验 获得超461个赞
<div class="kk1" style="display: table-cell;vertical-align:middle;text-align: center">
<div class="kk2" style="display: inline-block"></div>
</div>
<div class="kk1" style="display: flex;justify-content: center;align-items: center;">
<div class="kk2"></div>
</div>
<style>
.kk3:before{
display: inline-block;
content: '';
width: 0;
height: 0;
}
.kk3:before,.kk3 .kk2{
vertical-align: middle;
}
</style>
<div class="kk1 kk3">
<div class="kk2" style="margin: 0 auto"></div>
</div>
<div class="kk1">
<div class="kk2" style="margin: 0 auto"></div>
</div>不用定位的话，在你的样式的基础上，我只能想到这么多，前三个可以水平垂直居中，后面一个只能水平居中
- 5 回答
- 1 关注
- 2131 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消