Home > Web Front-end > HTML Tutorial > CSS positioning exercise 'cross' horizontal and vertical centering_html/css_WEB-ITnose

CSS positioning exercise 'cross' horizontal and vertical centering_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:44:14
Original
1264 people have browsed it

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>
Copy after login
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template