How to adjust text’s width and put it at center of post (Visual) editor?

Question

Edit 3: I guess this is solved. I just enabled the Gutenberg editor and discovered its "Classic editor" part, the Code Editor. The only thing I have to get used to is the editor's line-height that I can't easily modify, which isn't bad. This is working for me and it outweighs the need to modify functions.php or other complicated things like that (to me). Thank you.

---

[Disclaimer: I'm not a developer of any sort, but willing to take the time. (Can do a bit of CSS.) Also, new to this forum.]

I’m using Anders Norén’s Hemingway theme.

I haven’t tried creating child themes yet and I’m not sure whether a solution to this requires one.

My goal, in short, is to make the whole “Edit Post” webpage look like an offline word processor:

1. Make the Visual editor occupy the whole screen. (I use the classic editor.) (Done: Collapsed the vertical menu on the left side, selected 1-column layout, and disabled “full height editor and distraction-free functionality.”)
2. Set a width for the text (because currently text is almost from edge to edge of screen)
3. Put text at the center (but “aligned left,” not “justified”). This is for the "left and right margins," within the post editor.

How do I do #2 and #3?

Thank you.

Edit: Just to clarify: I'm looking to change how the Visual editor looks--only the Visual editor, not any output the live website would show.

---

Edit 2:

I can replicate what Balázs Varga showed, but (I'm sorry I should I have said this earlier) it doesn't work after I save the code on "Additional CSS." (And after clearing all caches.) I used the id #tinymce.

My browser (Firefox Developer) shows the changes in real time while I fiddle with the Inspector, but not after I save the additional CSS. That's weird, I think, and I think I can handle CSS pretty well: the theme Hemingway on my site doesn't look like the original Hemingway anymore, but all changes were made only through Additional CSS.

Searches on Google showed me that I might need to edit "functions.php"(?), but I don't know how that works for now, and I thought there might be another way in 2019. I avoid editing "complicated" things like that (to me), unless Wordpress makes it hard for me to break things, like with "Additional CSS," for example.

On the Inspector, I can solve it with something like this:

#tinymce {
    margin-left: 300px;
    margin-right: 300px;
} 

I wonder why this isn't a "feature" of the Visual editor already. Would be really nice. It could eliminate the need for word processors or third party editors (at least for "words only" writers like me).

Answer 1

You can inspect the element in your browser, so you can see that it's a tinymce iframe with the id content_ifr.

If you want to set the width in pixels, you could do:

#content_ifr {
    position: relative;
    max-width: 600px;
    left: 50%;
    transform: translate(-50%, 0);
}

left:50% alongside with position:relative will push the element to the center horizontally. However it will push the left side to the center, so you also need a horizontal transform set to -50%, so it's pulled back to the correct position (because percents in transforms are counted from the size of the element itself, not from it's parent like left does)

You should see something like this:

If you want to set the width in percents, you can simply apply a margin-left to center the element:

#content_ifr {
    width: 80%;
    margin-left: 10%; // set this value to: (100 - width) / 2
}

EDIT

You can also edit your functions.php to append your styles to the page, for example in the header area with the admin_head hook:

function hook_css() {
?>
    <style>
    #content_ifr {
        position: relative;
        max-width: 600px;
        left: 50%;
        transform: translate(-50%, 0);
    }
    </style>
<?php
}
add_action('admin_head', 'hook_css');