首页 > 开发 > CSS > 正文

css 水平居中，垂直居中，自适应宽度的代码

2024-07-11 08:48:15

字体：大中小

来源：转载

供稿：网友

一、宽度自适应的元素水平居中：

　　1.宽度自适应的元素可以是：绝对位定、浮动元素、行内元素。而我们通常布局，肯定不会用行内元素，所以会选择，绝对定位或浮动。
　　2.居中：这里我们应该会想到1/2、50%、一半等这些东西。　　

　　上图中：黑色为body，深绿色需要在body中水平居中，并且宽度是自适应的。亮绿色，是一个多余的DIV，就是为了让深绿色的DIV水平居中。

　　以下是实现代码：

　　pos元素的float:left或都用position:absolute;都可以，因为这两个属可以宽度自适应。

　　先这个多余的DIV亮绿色，水平50%移动(移动，可以用margin-left 或者 left)

　　再让其内容深绿色向右水平移动50%（只能用right属性移动）;

　　那么这个深绿色，就会在黑色的body里居中了！

复制代码

上一篇：DIV+CSS 三栏布局实例代码

下一篇：网页设计中常用的度量单位的介绍与比较

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

最牛同桌！我考了696分我同桌考了703分

2024-06-26 22:28:41

650分！高二女生考入北大：遗憾不能上高三

2024-06-26 22:26:16

男生估分600只考了397 妈妈：高考虽重要，但不代表所有

2024-06-26 22:23:01

唐尚珺回应是否会直播带货：有人出100万想和他合作！

2024-06-25 19:29:23

名校抢人名场面：清华、北大太拼了！

2024-06-25 19:22:14

男生高考语文满分！网友：第一次听说

2024-06-25 19:19:15

疑难解答

图片精选

网友关注