div的水平居中可以通过左右边距自动，宽度或最大宽度（而不是最小宽度）来完成？

Question

In the old days before having max-width and min-width , we have to set the width to some value other than auto , together with margin-left and margin-right to auto , for the div to be horizontally centered.

Now that we have max-width and min-width , we can also set the max-width to some value other than none to horizontally centered it? Is there any spec for it?

PS min-width won't work as the div will span the whole width, so you can consider it horizontally centered, except that the left and right margin are both 0 , so there is no horizontally centering effect.

Example:

width : https://jsfiddle.net/dtr7t4z7/1/
max-width : https://jsfiddle.net/dtr7t4z7/2/ and https://jsfiddle.net/dtr7t4z7/3/
min-width : https://jsfiddle.net/dtr7t4z7/4/

Answer 1

margin: auto will just fill the remaining space equally on both sides. If a width or max-width are not specified, a div will take up as much horizontal space as possible. Because the div is the full width of its container when only min-width is specified, there isn't any space left for margin: auto to distribute.

Answer 2

https://jsfiddle.net/ehnvy1xz/5/

body{
  display:flex;
  justify-content:center;
}
#line {
  text-align:center;
  background: yellow;
  min-width: 200px;
}

If you really need the min-width. I would recommend using flex on the parent div and centering it that way instead.