Shulou(Shulou.com)05/31 Report--

Today, I would like to share with you the relevant knowledge points about how to achieve the horizontal and vertical center of elements in Html5. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look.

The horizontal and vertical center of the element

1. Use the table tag and its own function.

.parent {border: 1px solid red Height: 500px} .child {border: 1px solid black} test Test

Effect.

2. Margin-left:-50px; margin-top:-50px

.parent {position: relative; background-color: yellow; width: 500px; height: 200px} .child {width: 100px; height: 100px; background-color: # fff; position:absolute; top:50%; left: 50% Margin-left:-50px; margin-top:-50px}

Effect.

3. Transform: translate (- 50% Morelle 50%)

.parent {width: 500px; height: 300px; border: solid 1px red; position: relative;} .child {width: 200px; height: 100px; border: 1px solid black; position:absolute; top:50%; left:50% Transform: translate (- 50% Murray 50%)}

Effect.

4 、 margin: auto

.p {width: 300px; height: 200px; border: 1px solid red; position: relative;} .c {width: 80px; height: 40px; background-color: # dedede; position:absolute; margin: auto; top:0; bottom:0 Left: 0; right: 0}

Effect.

5. Elastic box

.p {border: 1px solid red; width: 400px; height: 500px; display: flex; justify-content: center; align-items: center} .c {width: 100px; height: 100px; background-color: red;}

Effect.

What are the new features of html5CSS3 and what elements have been removed? How to deal with the browser compatibility of new HTML5 tags? How to distinguish between HTML and HTML5?

HTML5 is no longer a subset of SGML, but is mainly about the increase of image, location, storage, geolocation and other functions.

Paint canvas element

Video and audio elements for media playback

Local offline storage localStorage long-term storage data, the data will not be lost after the browser is closed

SessionStorage data is automatically deleted after the browser is closed

Better semantic content elements, such as article, footer, header, nav, section

Form controls, calendar, date, time, email, url, search

CSS3 implements rounded corners, shadows, special effects on text, and adds more CSS selectors, multi-background rgba.

New technologies webworker, websockt, Geolocation

Removed element

Elements of pure expression: basefont,big,center,font, smeme, strike, Tet, etc.

Elements that have a negative impact on usability: frame,frameset,noframes; is a tag that IE8/IE7/IE6 supports through the document.createElement method

You can use this feature to enable these browsers to support new HTML5 tags

After the browser supports the new tag, you also need to add the default style of the tag: of course, the best way is to use the mature framework directly, and the most frequently used is the html5shim framework.

-that's all the content of the article "how to center elements horizontally and vertically in Html5". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.