<! DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title>Edith Academy Small example</title> </head> <style type="Text/css">/ * Full-frequency transparent div*/of this style settingDiv { position: Absolute ; z-index: 1 ; width: 100% ;/ * The benefit of pressing the% ratio by the available width of the body is that it can be changed with the window size * / height: 100% ;/ * Press the body's available height * /Left : 0% ; top: 0% ; background-color: #000000 ; opacity: 0.3 ;}Div Div{ position: Absolute ; width: 300px ; height: 300px ;Left : 50% ; top: 50% ; transform: translate(-50%,-50%) ;/ * Here is a big part of the main is to set the div will be in accordance with the 50% 50%-way coordinate settings so forget to subtract the height and width of the div display the effect is not in the middle should be translated window 50% of the mouth is equivalent to the width or height divided by 2*/ background-color: White; opacity: 1 ;}Div Div P{ line-height: 200px; text-align: center; color: red; opacity: 1; font-size: 50px; } </style> <body> <div> <div> <p>Edith Academy</P> </div> </div> </Body>
</html>
Use CSS3 to center my div layer
