Home > Article > Web Front-end > CSS positioning exercise "cross" horizontal and vertical centering_html/css_WEB-ITnose
CSS positioning exercise "cross" horizontal and vertical centering_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:44:141242browse
1. First look at the effect to be achieved
The actual rendering
You can see that my implementation process is to first use a parent div to position the horizontal and vertical center, and then position two cross divs in the parent div.
Look at the implementation code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title></title> <style> body{margin:0;padding:0} /*定位父级div水平垂直居中*/ .body_main{ width:200px; height: 300px; background-color: #3091E5; margin:-150px 0 0 -100px; top:50%; left:50%; position: absolute; } /*定位水平div垂直居中*/ .row_div{ width:200px; height: 50px; background-color:#88E500; position: absolute; top:50%; margin:-25px 0 0 0; } /*定位列div水平居中*/ .clou_div{ width:50px; height: 300px; background-color: #3c510c; left:50%; position: absolute; margin:0 0 0 -25px; } </style></head><body> <div class="body_main"> <div class="row_div">横向的div</div> <div class="clou_div">竖直的div</div> </div></body></html> Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：HTML template_html/css_WEB-ITnoseNext article：HTML template_html/css_WEB-ITnose