Some feasible solutions:
1,
<Div class = "TB-p-c"> </div>
Style:
. TB-p-C
{Display: Table-cell;
Vertical-align: middle;
Width: 140px;
Height: 140px;
Text-align: center;
* Display: block;
* Font-size: 122px;
Background: red;
}
. TB-p-C img
{Vertical-align: middle;
}
This Code helps to center the image. However, when the image size is too large, the image will not be cut in Firefox. Therefore, you must control the image width <= container width.
2,
<Title> perfect horizontal and vertical center !! -- Compatible with horizontal and vertical center of IE6, IE7, FF, opera, and Safari </title>
<Style media = "screen" type = "text/CSS">
. Wrapper {width: 700px; Height: 400px; Background: # CCC; Border: 1px #000 solid ;}
. Holder {width: 500px; Height: 200px; display: Table; position: relative; margin: 12px auto; Border: 1px solid #596480; Background: # FFC ;}
. Holder Div {* position: absolute; top: 50%; left: 0; display: Table-cell; Vertical-align: middle; width: 100% ;}
. Holder P {position: relative; top:-50%; text-align: center; margin: 0; padding: 0 ;}
/*
Two Sets
Display: Table of holder
Display: Table-cell; Vertical-align: middle;
The vertical center in FF, Safari, and opera can be implemented, but it is invalid for the IE series.
Position of Holder: relative;
* Position: absolute; top: 50%; left: 0;
. Holder P position: relative; top:-50%;
Vertical center under IE6 and 7 is implemented by controlling the location of the absolute Layer
* Position: absolute in the holder div is the CSS hack for IE6 and 7 only.
For horizontal center, if the width of the holder div is not specified as 100%, it does not automatically extend 100% in IE7, and thus cannot implement horizontal center.
*/
</Style>
</Head>
<Body>
<Div class = "wrapper">
<Div class = "Holder">
<Div> <p> </P> </div>
</Div>
<Div style = "line-Height: 40px; Background: #006633; font-size: 14px; color: # ffffff; font-weight: bold; text-align: center; ">
The above picture is vertical and horizontally centered. You can change the height and width of holder to test. </div>
</Div>
3,
Horizontal center uses margin: 0 auto for the element itself, and text-align: Center for the parent element.
Vertical center is not a good solution. Generally, you can set the upper and lower padding settings.
Supplement: margin: Auto has the same effect as margin: 0 auto, but margin: 0 auto is a more standard method.
Left margin: 0 auto 0 0
Right margin: 0 0 0 auto
4,
Table (valign: middle) can be used in a timely manner to achieve the effect.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
