在采用Div+CSS布局的网页中,可通过绝对定位(position: absolute)使Div元素水平居中并垂直居底。以下将通过具体示例进行说明。
1、 新建名为test.html的HTML文件,演示如何通过CSS实现子div在父div内水平居中且垂直靠底的布局效果。
2、 在test.html中,用div标签创建两个相互嵌套的div元素。
3、 为两个div元素分别添加class属性,值设为con和bot,以便后续通过CSS进行样式定义与控制。
4、 在test.html文件的style标签中,为class属性值为con的div元素定义CSS样式:将其宽度设为800像素,高度设为1000像素,背景色设为纯黑色,并通过设置左右外边距为auto、上下外边距为0,实现该元素在页面中水平居中显示。
5、 在test.html文件的
6、 为类名为bot的div元素应用CSS样式,使其固定于页面底部并水平居中。具体做法是:设置position为absolute,bottom为0,left为50%,再通过margin-left负值(-100px)向左微调,确保元素中心与视口中心对齐。
7、 在浏览器中打开test.html,即可看到div元素已实现垂直居中并底部对齐的效果。
8、 新建一个名为test.html的文件。
9、 使用div进行嵌套布局
10、 为两个div设置CSS样式,内层div采用绝对定位,使其固定显示在页面底部中央位置。
