初学HTML，问题如下：一个大的div里面套一个小的div，对小div执行margin：auto；1，只能左右居中，上下居中现在只会margin-top，能不能有一种语言让他自动上下居中呢？（也就是说，不只是水平线上的居中，而是整个平面的居中。）2，对于margin：auto；除了居中1/2，有没有自动居左1/3,3/4这类的指令?其实问这些主要想考虑的是兼容性的问题，对于不同的浏览器，或者不同的客户端（电脑，手机，平板）用直接的像素px定位的话，往往会发生排版错乱，所以是否存在一个指令，对于整个网页能够依据浏览者使用的屏幕大小按比例的缩放（基于客户端的设想）？
2 回答
已采纳
ahao430
TA贡献35条经验 获得超41个赞
1. 上下居中方案还是有多种的。对于单行文字，设置line-height和height相等即可。对于小的div，可以通过定位后设置top:50%，再设置margin-top（或者transform：translateY）：负的小div高度一半。
另外，为什么垂直居中margin：auto没效果呢？因为水平不设置宽度的话，默认会填满，而垂直不设置也不会填满容器。可以通过这样设置，实现margin：auto垂直居中。
<style>
.box1{
width: 300px;
height: 300px;
background-color: red;
position: relative;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top:0;
bottom: 0;
left:0;
right:0;
margin:auto;
</style>
</head>
<body>
<div class="box1">
<div class="box2">
aa
</div>
</div>
</body>2. 对于水平居中方法可以同上。left：50%后再向左移动div50%。1/3, left：33.3%。1/4，left：25%。
3. 最好的方式是用flex布局，就是目前兼容性较差。对父容器设置display：flex; justify-content:center; align-items:center; 可以轻松实现水平垂直居中。
4. 通过百分比而不是px写页面，可以在不同分辨率下自动变化，但是小屏幕时会看不清。
浮动元素或者inline-block元素，当容器宽度不足时，会自动换行。
移动设备有一个视口的概念。它会按照900px宽度布局，再根据屏幕宽度进行缩放。但这样实现的效果同样不好。
一般是针对移动设备专门写移动页面。或是响应式设计，综合利用媒体查询、百分比和流式布局，在不同分辨率下实现不同的效果。
Azmodan丶
TA贡献2条经验 获得超0个赞
1.margin:auto 的意思是左右按照50%的比例进行摆放，至于上下的自动居中你可以通过百分比的形式来进行。
2.想要盒子按照1/2或者别的比例进行摆放，在margin值的设定就需要用百分比来进行。
望采纳
- 2 回答
- 0 关注
- 1519 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消