Home  >  Article  >  Web Front-end  >  How to center a floated element? How to center an absolutely positioned div?

How to center a floated element? How to center an absolutely positioned div?

王林
王林forward
2020-06-15 16:45:405175browse

How to center a floated element? How to center an absolutely positioned div?

How to center a floating element? How to center an absolutely positioned div?

div centering:

border: 1px solid red;
margin: 0 auto; 
height: 50px;
width: 80px;

Floating elements are centered up, down, left and right:

border: 1px solid red;
float: left;
position: absolute;
width: 200px;
height: 100px;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px;

Absolutely positioned left and right centering:

border: 1px solid black;
position: absolute;
width: 200px;
height: 100px;
margin: 0 auto;
left: 0;
right: 0;

Recommended tutorial: css Quick Start

The above is the detailed content of How to center a floated element? How to center an absolutely positioned div?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
This article is reproduced at:juejin.im. If there is any infringement, please contact admin@php.cn delete