CSS to achieve a known wide-high div vertical Center; Adaptive height two column layout __div

The recent written test often encountered this problem, usually write code seems very little thinking about this, I would like to make a small summary for the interview needs.

There are still a lot of questions about the vertical layout of elements, and interviews like to ask, for example, two columns with different layouts, highly adaptive. I also write it out.

One, the element is centered vertically:

Since the use of CSS, high and wide should be fixed value it, if it is based on the content of the adjustment is required by the use of JS dynamic adjustment.

<div id= ' Div1 ' ></div>

html,body{height:100%}

#div1 {
position:absolute;
width:300px;
height:200px;
top:50%;left:50%;
background:red;
margin:-100px 0 0-150px;
}

The element to be positioned must be absolutely positioned, first set an initial position, the upper left corner in the middle of the page, and then offset with margin

Offset WIDTH/2 to the left; HEIGHT/2 is required for us to compute, and then the element is centered.

This is relative to the body, if the div is centered relative to the parent element, the posi of the parent element is set to relative, and the element can be positioned relative to the parent element.

Two, 2 column layout highly adaptive

In the interview sometimes ask the display what attributes, commonly used none,block,inline can think, I will easily ignore the table-related properties.

This problem is easier to write with tabular attributes.

<div id= ' div2 ' >
	<div id= ' ch1 ' >
		<ol>
			<li>ddssd</li>
			<LI>DDSSD </li>
			<li>ddssd</li>
			<li>ddssd</li>
		</ol>
	</div>
	<div id= ' CH2 ' >
		<ol>
			<li>ddssd</li>
			<li>ddssd</li>
			<li>ddssd</li>
			<li>ddssd</li>
			<li>refe</li>
			<li>refe </li>
			<li>ddssd</li>
			<li>ddssd</li>
			<li>ddssd</li>
			<li>ddssd</li>
			<li>refe</li>
			<li>refe</li>
		</ol >
	</div>
</div>

#div2 {width:100%;d isplay:table}
#ch1 {display:table-cell;background:red;}
#ch2 {display:table-cell;background:blue;color:white;}

Demo Effect Chart:

Recently was a written interview abuse of the exhausted Ah, I would be better if Fachota early

As long as you are willing to learn, every day in progress, when it is not too late ...

Come on, come on.